@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-normal-latin.woff2) format("woff2")} /* ============================================================ Wags n Tags — design tokens Link this from any new page: Contrast ratios below were measured, not estimated (2026-09-29). ============================================================ */ :root{ /* ---- Brand greens ---- */ --green:#173F35; /* primary. Logo, headings on light, panel mid-tone */ --green-deep:#0E211C; /* darkest. Panel base, device bodies */ --green-mid:#28604F; /* lighter green for decorative shapes only */ /* ---- Grounds ---- */ --cream:#F7F3EA; /* the page background. Never pure white */ --white:#fff; /* cards and inputs only, never a full-page surface */ --sage:#EFE8DA; /* soft green tint. Chips, icon circles, hover fills */ /* ---- The one accent ---- */ --amber:#D89B38; /* buttons, the tag, the single accent. Only one */ --amber-press:#C4862C; /* hover and pressed state */ --amber-text:#96621E; /* amber as TEXT on white or cream. 5.17:1 / 4.67:1 */ --amber-deep:#A96F22; /* decorative amber only — 4.21:1, too low for body text */ /* ---- Type colors ---- */ --ink:#173F35; /* body text. 14.06:1 on cream, 15.57:1 on white */ --muted:#315C4D; /* secondary text. 4.79:1 on cream, 5.30:1 on white */ --line:rgba(23,63,53,.14); /* borders and dividers */ /* ---- Panel and artwork support (derived, not core brand) ---- */ --panel-grad:radial-gradient(120% 90% at 30% 22%, #1D4B40 0%, #173F35 45%, #0E2C25 100%); --on-green:#C9D8CF; /* body text on a green panel. 7.9:1 */ --on-green-dim:#B9CDC3; /* quieter text on green */ --placeholder:#9AA5A0; /* input placeholder */ --line-hover:#C9D6CB; /* ghost button border on hover */ --brass-lit:#F0BE6E; /* tag highlight */ --brass-shade:#B97E28; /* tag shadow */ --brass-ring:#D8CCB2; /* the split ring */ --engrave:#5A3A11; /* engraved marks on brass */ --warm-tint:#F6E3C4; /* warm icon circle fill */ --warm-ink:#8A5B14; /* icon stroke inside a warm tint circle */ /* ---- Type ---- */ --sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; --serif:'Inter',ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; /* headings: Gambarino (his pick 2026-10-02) */ --display:'Inter',ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; /* ---- Shape ---- */ --r-card:16px; --r-input:12px; --r-pill:999px; --shadow-card:0 26px 50px -32px rgba(23,63,53,.45); --shadow-float:0 18px 30px -12px rgba(0,0,0,.7); --focus-glow:0 0 0 3px rgba(217,154,61,.34); } /* ============================================================ Rules that go with these values. Breaking them is what makes a page stop looking like the rest of the product. 1. ONE accent. Amber, and nothing else. No second accent colour. 2. Amber buttons take --ink text, NEVER white. White on amber measures 2.43:1 and fails outright. 3. Never pure #000, and never pure #fff as a large surface. Cream is the page, white is for cards sitting on it. 4. Amber as text uses --amber-text. --amber-deep is decoration only. 5. Focus: 2.5px solid var(--green), offset 3px. Inputs focus to a green border plus var(--focus-glow). 6. Fonts: Gambarino for headings (one weight, ligatures off), General Sans for body (400/500/600/700). Caveat Brush exists ONLY inside the logo artwork — never set it as live text. 7. Load the logo as an image, never redraw it: assets/logo-mark-green.png paw only, for light surfaces assets/logo-mark-cream.png paw only, for the green panel assets/logo-word-green.png wordmark only, light surfaces assets/logo-word-cream.png wordmark only, green panel assets/logo-full-green.png stacked lockup, light surfaces assets/logo-full-cream.png stacked lockup, green panel ============================================================ */ /* Google Sans-brand colours, used only in the "Continue with Google" button per Google's own branding rules. Not part of this palette: #4285F4 #34A853 #FBBC05 #EA4335 */ /* ONE FONT (his call, 2026-10-05): Gambarino for everything, subtext, buttons and labels included. Gambarino has a single weight, so nothing is bold anywhere; hierarchy comes from size, color and spacing. Ligatures stay off so the i dot never fuses into the f. */ html{font-variant-ligatures:no-common-ligatures} html,body,body *{font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif !important;font-weight:400 !important;font-synthesis:none !important} /* ONE FONT = INTER (his call 2026-11-04, same as the tutors site). Two weights only: 600 for titles (h1 to h4, card titles, FAQ questions, big product words, prices), 400 for every other word, buttons and nav included. Three sizes only (--fs-s / --fs-m / --fs-l). */ html body h1,html body h2,html body h3,html body h4,html body summary,html body .faq summary,html body .pc__word,html body .pc__price b,html body .agit__turn,html body .ph__hi,html body .marq__item b{font-weight:600 !important} /* TYPE SYSTEM (2026-11-04, the tutors-site rule): only three text sizes. s = 16px everywhere, m = 20px phone to 24px laptop, l = 32px phone to 48px laptop. Every font-size on the site uses one of these. Phone-screen drawings and the game are exempt. */ :root{--fs-s:1rem;--fs-m:clamp(1.25rem,1rem + .6vw,1.5rem);--fs-l:clamp(2rem,1.2rem + 2.5vw,3rem)}