/** * Husna Villas — tokens.css * * --------------------------------------------------------------------- * REFERENCE PRECEDENCE — read this before changing any value below. * * This file was originally extracted from * reference/design/husna-villas-light.html (the three-view light * concept). That file is NO LONGER CANONICAL. * * The canonical design is now the villa/home page pair: * reference/design/husna-villa-internal page.html * reference/design/husna-hero-03-revised.html * * Where the two disagree, the villa/home design wins. Several values * below were changed away from the light concept for exactly that * reason and are correct as they stand — do not "restore" them by * re-deriving from husna-villas-light.html: * * body font-size 16px -> 15px * body line-height 1.65 -> 1.8 * .eyebrow size 10px -> 9.5px * .eyebrow tracking .3em -> .36em * --disp-w 300 -> 200 * --disp-ls +.01em -> -.03em (display type tracks NEGATIVE) * * The type scale below is likewise taken from the villa design, not the * light concept. * --------------------------------------------------------------------- * * Enqueued BEFORE main.css, so main.css can * only ever add to this layer — anything defined in both files resolves to * main.css. Duplicates are therefore removed from main.css, not from here. * * Concept scaffolding deliberately NOT carried across: * .ph / .ph-* gradient photo stand-ins — the theme uses real * thumbnails and gallery images instead * .bar fixed view-switcher toolbar * .view / .view.on the three-view show/hide mechanism * body{padding-bottom:50px} clearance for that toolbar * body.serif payload of the toggleType() switch * * --display / --disp-w / --disp-ls are kept as variables even though the * serif switch is dropped, so reinstating it stays a one-line change. * * @package HusnaVillas */ /* ========================================================================== 1. Tokens ========================================================================== */ :root { /* Colour — from the concept :root */ --ink: #0B0B0B; --paper: #FFFFFF; --bone: #F5F4F1; --gold: #CAAA61; --gold-deep: #96762E; --grey: #5E5E5E; --hair: #E4E2DD; --hair-dark: #262626; /* * Muted text on --ink — --grey is too dark to read there (it's tuned * for text on --paper/--bone). Already part of the approved palette in * reference/design/branding.html; ported here for the first time for * the hero's claim/spec-bar secondary text * (reference/design/husna-hero-03-revised.html), not invented for it. */ --dim: #CFCDC8; --dim-2: #8C8A85; /* Used by the results view: .avail.gone, .blocked-why */ --red: #C0392B; /* * Disabled controls. Deliberately darker than --hair (#E4E2DD): the * hairline grey is tuned for rules and dividers, and a disabled * control drawn in it reads as missing rather than as present-but- * unavailable. This is the canonical design's own disabled tone * (.stepper button:disabled, .calhead .nav button:disabled). */ --disabled: #C4C2BC; /* Type */ --ui: "Montserrat", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; --display: "Montserrat", sans-serif; /* * Display type is LIGHT and tracks NEGATIVE — see the precedence note * at the top of this file. --disp-ls-lg is the tighter tracking the * canonical design uses at hero scale (.h1x, -.035em); --disp-ls is * the section-heading value (.h2x, -.03em). */ --disp-w: 200; --disp-ls: -.03em; --disp-ls-lg: -.035em; /* * Type scale — every size in the canonical villa design, named by * role rather than by number so a component reads as what it is. * main.css should reference these rather than repeating literals. */ --fs-3xs: 8.5px; /* stepper sub-label, field label */ --fs-2xs: 9px; /* breadcrumb, form label */ --fs-xs: 9.5px; /* eyebrow, gloss, spec, price unit */ --fs-sm: 10px; /* nav links, small caps labels */ --fs-cta: 10.5px; /* buttons */ --fs-note: 11px; /* hints, notices, reassurance */ --fs-ms: 13px; /* secondary body, table rows */ --fs-body: 15px; /* base body, inputs, field values */ --fs-lg: 17px; /* wordmark */ --fs-xl: 19px; /* stepper glyphs */ --fs-2xl: 26px; /* section numerals */ --fs-3xl: 38px; /* price */ /* Display sizes */ --fs-disp-sm: clamp(24px, 3.2vw, 40px); /* section headings (.h2x) */ --fs-disp-lg: clamp(36px, 5.4vw, 74px); /* villa name / hero (.h1x) */ /* Tracking */ --ls-eyebrow: .36em; --ls-wide: .34em; --ls-label: .26em; --ls-cta: .22em; --ls-nav: .2em; } /* ========================================================================== 2. Base — the parts of the concept's body/base rules that carry over ========================================================================== */ html { scroll-behavior: smooth; } body { font-size: var(--fs-body); line-height: 1.8; } /* * .btn is applied to