/* ==========================================================================
THE AM | FINE TIMEPIECES - Design tokens, reset, and base typography.
Loaded on every page before components.css and responsive.css.
========================================================================== */
/* Google Fonts is now loaded via a in
includes/header.php's , not @import here - @import forces the
browser to fully download+parse this file before it even discovers the
font stylesheet URL, serializing what should be a parallel fetch (this
file, the font CSS, and the font files themselves all queue one after
another instead of loading together) and delaying first text render on
every page, since Cormorant Garamond/Jost are this site's primary
typefaces. See includes/header.php for the actual . */
:root {
/* ---- Core ---- */
--ink: #0A0A0B; /* page black */
--ink-soft: #121215; /* raised surfaces, cards */
--ink-line: #1E1E22; /* hairline borders on dark */
--carbon: #141416; /* carbon-weave section bg */
/* ---- Gold ---- */
--gold-100: #F7EFC8;
--gold-300: #E8C766;
--gold-500: #D4AF37; /* primary brand gold */
--gold-700: #A67C1A;
--gold-900: #6E4E08;
--gold-grad: linear-gradient(135deg, #F7EFC8 0%, #D4AF37 38%, #A67C1A 62%, #F0DFA0 100%);
/* ---- Neutrals ---- */
--white: #FFFFFF;
--bone: #F6F4EF; /* light-section background */
--grey-200: #E4E1D9; /* hairline borders on light */
--grey-400: #8A8A92;
--grey-600: #55555C;
/* ---- Accents ---- */
--ruby: #8B1E3F; /* sale badges, errors */
--ruby-100: #F6E4E9;
--green: #2E7D5B; /* in-stock, success */
/* ---- Type ---- */
--font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
--font-body: "Jost", "Inter", "Helvetica Neue", Arial, sans-serif;
/* ---- System ---- */
--radius: 2px;
--shadow-lift: 0 18px 50px rgba(0, 0, 0, .45);
--shadow-card: 0 8px 28px rgba(0, 0, 0, .12);
--ease: cubic-bezier(.22, .61, .36, 1);
--dur: 600ms;
/* ---- Layout ---- */
--container-max: 1440px;
--gutter: clamp(20px, 4vw, 48px);
--section-pad: clamp(64px, 9vw, 140px);
--header-h: 92px;
--header-h-scrolled: 72px;
--announcement-h: 40px;
}
/* ==========================================================================
Reset
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* Without this, anything scrolled flush to the viewport top - an anchor
link (#reviews), scrollIntoView() (shop-filter.js's grid refresh),
browser find-in-page, focus-driven scroll - ends up hidden behind the
sticky header instead of below it. Verified as a real bug: it made the
first row of any scrolled-to grid unclickable, the header intercepted
the click. Uses the taller unscrolled height so it's correct even when
the jump starts from the very top of the page. */
scroll-padding-top: calc(var(--header-h) + var(--announcement-h) + 16px);
}
body {
margin: 0;
background: var(--ink);
color: var(--bone);
font-family: var(--font-body);
font-size: 15px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100dvh;
overflow-x: hidden;
}
img, picture, video, svg { display: block; max-width: 100%; }
/* The HTML [hidden] attribute must always win over an author `display`
declaration - without this, any component styled with `display: flex`
(drawers, overlays, count badges, form-error rows, ...) silently ignores
`hidden`/`el.hidden = true` and keeps occupying layout space, invisible
but still catching clicks. Verified against a real bug: closed drawers
were blocking pointer events on the header underneath them. */
[hidden] { display: none !important; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a {
color: inherit;
text-decoration: none;
}
button, input, select, textarea {
font: inherit;
color: inherit;
background: none;
border: none;
border-radius: 0;
outline: none;
}
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
/* Skip link - first focusable element on every page. */
.skip-link {
position: absolute;
top: -100px;
left: 12px;
z-index: 999;
background: var(--gold-500);
color: var(--ink);
padding: 10px 18px;
font-size: 13px;
font-weight: 600;
letter-spacing: .04em;
transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }
/* Visible, on-brand focus ring everywhere - never suppressed. */
:focus-visible {
outline: 2px solid var(--gold-500);
outline-offset: 3px;
}
/* ==========================================================================
Typography scale
========================================================================== */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 .5em;
font-family: var(--font-display);
font-weight: 500;
line-height: 1.15;
color: inherit;
}
h1 { font-size: clamp(34px, 5vw, 60px); }
h2 { font-size: clamp(28px, 3.6vw, 44px); }
h3 { font-size: clamp(22px, 2.6vw, 30px); }
h4 { font-size: 20px; }
.eyebrow {
display: inline-block;
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold-300);
margin-bottom: 14px;
}
.section-on-light .eyebrow { color: var(--gold-700); }
.lede {
font-size: 17px;
line-height: 1.75;
color: var(--grey-400);
max-width: 62ch;
}
.section-on-light .lede { color: var(--grey-600); }
.hairline {
border: none;
border-top: 1px solid var(--ink-line);
margin: 0;
width: 64px;
}
.hairline--gold { border-top-color: var(--gold-500); width: 48px; }
.section-on-light .hairline { border-top-color: var(--grey-200); }
/* ==========================================================================
Layout primitives
========================================================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section {
padding-block: var(--section-pad);
}
.section-on-dark { background: var(--ink); color: var(--bone); }
.section-on-carbon { background: var(--carbon); color: var(--bone); }
.section-on-light { background: var(--bone); color: var(--ink); }
/* .section-on-* only ever set background/color - many pages pair a bare
.section-on-light/-dark with no .section class and no inline
padding at all (contact, faq, about, dealers, journal, compare,
track-order, order-success, every CMS page via pages/page.php, the
product detail page's related-products section), meaning they get ZERO
padding-block: content sits flush against whatever's above and below.
.section's own padding (clamp(64px, 9vw, 140px)) is sized for big
marketing sections and would be excessive here, so this is a smaller,
dedicated fallback default. Wrapped entirely in :where() to carry ZERO
specificity - a real, single-class rule like .auth-page/.shop-layout/
.brand-strip-section must always be able to override this outright
regardless of stylesheet order, and any inline style="padding-top:..."
(cart.php, checkout.php, the shop/collection/brand title bars) still
wins per-property too. */
:where(.section-on-dark, .section-on-carbon, .section-on-light):where(:not(.section)) {
padding-block: 40px 80px;
}
.section-header {
text-align: center;
max-width: 640px;
margin: 0 auto 48px;
}
.grid { display: grid; gap: var(--gutter); }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
Carbon-weave texture (signature dark-section accent, 4% opacity)
========================================================================== */
.texture-carbon {
position: relative;
isolation: isolate;
}
.texture-carbon::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
opacity: .04;
pointer-events: none;
background-image:
repeating-linear-gradient(45deg, var(--gold-500) 0, var(--gold-500) 1px, transparent 1px, transparent 8px),
repeating-linear-gradient(-45deg, var(--gold-500) 0, var(--gold-500) 1px, transparent 1px, transparent 8px);
}
.texture-carbon > * { position: relative; z-index: 1; }
/* ==========================================================================
Motion
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}