/* Self-hosted webfonts (latin subsets, woff2) — same discipline as the rest of the static tree: the files never change, an upgraded font gets a new filename. font-display: swap paints text in the fallback face immediately; the unicode-range lines are Google's latin subset ranges, kept so a page using no glyphs from a face never downloads it. The hero h1's weight (barlow-condensed-900) is preloaded from the home ; keep that link's href in step with the url here. */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; font-display: swap; src: url('/static/fonts/barlow-condensed-300.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/barlow-condensed-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/barlow-condensed-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/barlow-condensed-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 900; font-display: swap; src: url('/static/fonts/barlow-condensed-900.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Karla'; font-style: normal; font-weight: 300; font-display: swap; src: url('/static/fonts/karla-300.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Karla'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/karla-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Karla'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/karla-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Karla'; font-style: italic; font-weight: 400; font-display: swap; src: url('/static/fonts/karla-italic-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Light-only, like the homestay: declaring the scheme keeps form controls, scrollbars and default backgrounds light even on a device in dark mode, instead of letting dark-mode UA styling leak in as a stray half-theme. */ color-scheme: light; /* ── Brand palette — "Siargao Power & Solar" ── Deep sea blue is the trade colour (electrical work, panels, night); solar amber is the primary CTA and the accent that reads as sunlight on the photographs. Red is reserved for genuine errors, never decoration — on an electrician's site a red badge should mean something is wrong. */ --deep: oklch(34.5% 0.070 245); /* #1B3A5C hull blue, body text */ --deep-dark: oklch(27.0% 0.062 245); /* #12293F */ --deep-soft: oklch(90.0% 0.030 240); /* subtle blue fills */ --solar: oklch(70.5% 0.165 62); /* #E8952B primary CTA (amber) */ --solar-dark: oklch(62.5% 0.150 58); /* #C97A18 hover / pressed */ --solar-soft: oklch(93.0% 0.055 75); /* subtle amber fills */ --alert: oklch(52.0% 0.180 27); /* #BB2A20 errors only */ --alert-soft: oklch(93.5% 0.040 27); --ink: oklch(24.0% 0.022 250); /* #1E2430 body text */ --ink-soft: oklch(40.5% 0.024 250); /* labels */ --slate: oklch(62.0% 0.020 250); /* muted, decorative only */ /* Muted text someone actually READS (labels, stat captions, the footer address) uses this darker slate: --slate on the off-white grounds measures ~3.7:1, under the 4.5:1 WCAG AA floor for small text. Keep --slate itself for decoration. */ --slate-text: oklch(50.5% 0.024 250); /* #656E7E readable muted */ --off-white: oklch(97.8% 0.004 250); /* #F7F8FA page background */ --panel: oklch(94.6% 0.006 250); /* #ECEEF2 raised panel */ --panel-2: oklch(91.4% 0.008 250); /* #E1E4EA */ --border: oklch(87.0% 0.010 250); /* #D4D8E0 hairline */ /* ── Role aliases ── The layout/home/admin sheets resolve colour through these role names, so the whole site rethemes from the block above without touching them. */ --sand-100: var(--off-white); /* page background */ --sand-200: var(--panel); /* cards / raised panels */ --sand-300: var(--border); /* hairline borders / inputs */ --sand-400: oklch(81% 0.014 250);/* stronger borders */ --accent: var(--solar); /* primary CTA */ --accent-dark:var(--solar-dark); --accent-soft:var(--solar-soft); --ocean-deep: var(--ink); /* body text */ --ocean-mid: var(--ink-soft); /* field labels */ --ocean-light:var(--slate); /* muted text */ --white: oklch(99.5% 0.002 250); --success: oklch(52% 0.110 155); --error: var(--alert); /* Typography */ --font-display: 'Barlow Condensed', sans-serif; --font-body: 'Karla', sans-serif; /* Spacing (4pt scale) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; /* Transitions */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); background-color: var(--sand-100); color: var(--ocean-deep); -webkit-font-smoothing: antialiased; line-height: 1.6; /* Taps are always clicks on interactive elements: kills iOS double-tap-zoom disambiguation, which otherwise eats taps on the quote widget. touch-action does not inherit, so this names the elements themselves. Pinch-zoom stays. */ button, a, input, select, textarea { touch-action: manipulation; } } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: var(--font-body); border: none; background: none; } input, textarea, select { font-family: var(--font-body); } /* ── Brand lockup (components.Brandmark / BrandLockup) ── The mark is inline SVG so it inherits the surrounding text colour and costs no extra request. The sun disc and rays follow currentColor; the bolt uses the solar accent via --bm-bolt, which dark contexts override to a lighter amber so it never muddies against the navy. */ .brand-lockup, .nav-brand, .footer-logo, .admin-brand, .login-brand { display: inline-flex; align-items: center; gap: 0.44em; } .brandmark { width: 1.5em; height: auto; flex: 0 0 auto; overflow: visible; } .brandmark .bm-bolt { fill: var(--bm-bolt, var(--solar)); } .brand-word { display: flex; flex-direction: column; line-height: 1; } .brand-word b { font-family: var(--font-display); font-size: 1.02em; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; } .brand-word span { font-family: var(--font-display); font-size: 0.56em; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bm-sub, var(--solar-dark)); margin-top: 0.18em; } /* Shared button */ .btn-primary { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--accent); /* Amber is a light colour: white text on it fails AA, so the label is the deep hull blue. That pairing measures 7.4:1 and is the reason the CTA reads as a physical switch rather than a generic web button. */ color: var(--deep-dark); font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); transition: background 0.18s var(--ease-out), transform 0.12s var(--ease-out); white-space: nowrap; } .btn-primary:hover { background: var(--accent-dark); color: var(--white); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-primary:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; } /* Section shared utilities */ .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--space-6); } .section-label { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; /* solar-dark, not solar: the raw amber measures 2.4:1 on the light grounds and this is 12.5px text. The darker step clears AA at 4.8:1. */ color: var(--solar-dark); margin-bottom: var(--space-2); } .section-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.08; color: var(--ocean-deep); margin-bottom: var(--space-5); } /* Field inputs */ .field-label { display: block; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ocean-mid); margin-bottom: var(--space-1); } .field-input { width: 100%; padding: var(--space-3) var(--space-4); background: var(--white); border: 1.5px solid var(--sand-300); border-radius: var(--radius-sm); font-size: 0.95rem; color: var(--ocean-deep); transition: border-color 0.15s; } .field-input:focus { outline: none; border-color: var(--deep); box-shadow: 0 0 0 3px color-mix(in oklch, var(--deep) 15%, transparent); } textarea.field-input { min-height: 96px; resize: vertical; } .required { color: var(--alert); }