/* ============================================================ CHARLIE FOXTROT CO. — shared styles Rugged tactical storefront. Theming via [data-theme] on . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&family=Saira:wght@400;500;600&display=swap'); /* ---- Color directions ------------------------------------- */ :root, :root[data-theme="olive"]{ --paper:#15170f; --panel:#1d2014; --panel-2:#23271a; --panel-3:#2c3120; --ink:#ece9da; --muted:#9aa07f; --faint:#6f7359; --line:rgba(236,233,218,.14); --line-2:rgba(236,233,218,.28); --brand:#58622f; --brand-ink:#ece9da; --accent:#c7b27a; --accent-ink:#15170f; --hot:#c4452f; --hot-ink:#fff; } :root[data-theme="coyote"]{ --paper:#17140f; --panel:#211b12; --panel-2:#291f15; --panel-3:#33271a; --ink:#efe7d8; --muted:#ab977c; --faint:#7c6a52; --line:rgba(239,231,216,.14); --line-2:rgba(239,231,216,.28); --brand:#6e4b2c; --brand-ink:#efe7d8; --accent:#8a9a5b; --accent-ink:#16130d; --hot:#c4452f; --hot-ink:#fff; } :root[data-theme="blackops"]{ --paper:#0d0d0e; --panel:#161617; --panel-2:#1d1d1f; --panel-3:#262628; --ink:#ededed; --muted:#8b8b8e; --faint:#5e5e61; --line:rgba(237,237,237,.12); --line-2:rgba(237,237,237,.24); --brand:#2a2a2c; --brand-ink:#ededed; --accent:#ff6a1a; --accent-ink:#0d0d0e; --hot:#ff6a1a; --hot-ink:#0d0d0e; } :root[data-theme="patriot"]{ --paper:#0f1322; --panel:#161b2e; --panel-2:#1c2238; --panel-3:#252d49; --ink:#eef1f7; --muted:#93a0bd; --faint:#62708f; --line:rgba(238,241,247,.14); --line-2:rgba(238,241,247,.28); --brand:#1b2748; --brand-ink:#eef1f7; --accent:#c0263a; --accent-ink:#ffffff; --hot:#c0263a; --hot-ink:#fff; } :root{ --font-head:'Zilla Slab', Georgia, serif; --font-ui:'Oswald', 'Arial Narrow', sans-serif; --font-body:'Saira', system-ui, sans-serif; --font-mono:ui-monospace, 'SFMono-Regular', Menlo, monospace; --wrap:1240px; } :root[data-headfont="stencil"]{ --font-head:'Oswald','Arial Narrow',sans-serif; } /* ---- Reset ------------------------------------------------- */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;overflow-x:hidden} body{ background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:clip; position:relative; min-height:100vh; max-width:100vw; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} ::selection{background:var(--accent);color:var(--accent-ink)} /* worn grain overlay */ body::before{ content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0; mix-blend-mode:overlay; transition:opacity .3s; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } :root[data-texture="on"] body::before{opacity:.5} /* ---- Layout ------------------------------------------------ */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px} .section{padding:84px 0} .section--tight{padding:54px 0} /* ---- Type helpers ----------------------------------------- */ .eyebrow{ font-family:var(--font-ui); font-weight:600; text-transform:uppercase; letter-spacing:.22em; font-size:12px; color:var(--accent); } .stamp{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line-2); padding:5px 9px; border-radius:3px; white-space:nowrap; } .stamp b{color:var(--ink);font-weight:600} .kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;color:var(--muted)} h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.02;letter-spacing:-.01em} .display{ font-family:var(--font-head); font-weight:700; line-height:.92; letter-spacing:-.02em; text-transform:uppercase; font-size:clamp(44px,7vw,104px); } :root[data-headfont="stencil"] .display{letter-spacing:.01em;font-weight:700} .lead{font-size:clamp(17px,1.4vw,20px);color:var(--muted);max-width:54ch;line-height:1.5} /* ---- Buttons ---------------------------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-ui); font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:14px; line-height:1; padding:16px 26px; border:1px solid var(--line-2); background:transparent; color:var(--ink); border-radius:3px; transition:.16s ease; cursor:pointer; } .btn:hover{border-color:var(--ink);background:rgba(255,255,255,.04)} .btn--accent{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .btn--accent:hover{filter:brightness(1.08);background:var(--accent)} .btn--block{width:100%;padding:19px 26px;font-size:15px} .btn--lg{padding:19px 32px;font-size:15px} .btn--ghost{background:transparent} .btn:disabled{opacity:.45;cursor:not-allowed} /* Hero CTA pair — equal-width on wide screens, full-width stacked on narrow. The 200px basis means once a single button can't fit beside its neighbor it wraps and each row-mate gets 100% width, so the two buttons never look mismatched. */ .btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px} .btn-row > .btn{flex:1 1 200px;justify-content:center;text-align:center} /* ---- Top ticker ------------------------------------------- */ .ticker{ background:var(--accent); color:var(--accent-ink); font-family:var(--font-ui); font-weight:600; text-transform:uppercase; letter-spacing:.18em; font-size:11.5px; overflow:hidden; white-space:nowrap; border-bottom:1px solid rgba(0,0,0,.25); width:100%; max-width:100vw; } .ticker__track{display:inline-flex;gap:0;padding:9px 0;animation:slide 32s linear infinite} .ticker__track span{padding:0 26px;display:inline-flex;align-items:center;gap:26px} .ticker__track span::after{content:"★";opacity:.5} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.ticker__track{animation:none}} /* ---- Header ----------------------------------------------- */ .nav{ position:sticky; top:0; z-index:100; background:color-mix(in srgb,var(--paper) 86%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .nav__row{display:flex;align-items:center;gap:32px;height:72px} .brand{display:flex;align-items:center;gap:12px;flex-shrink:0} .brand__mark{ width:38px;height:38px;border:2px solid var(--ink);border-radius:3px; display:grid;place-items:center;font-family:var(--font-head);font-weight:700; font-size:20px;transform:rotate(0);position:relative; } .brand__mark::after{content:"";position:absolute;inset:5px;border:1px solid var(--line-2)} .brand__name{font-family:var(--font-head);font-weight:700;font-size:19px;letter-spacing:.02em;text-transform:uppercase;line-height:1} .brand__name small{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;color:var(--muted);font-weight:400;margin-top:3px} .nav__links{display:flex;gap:28px;margin-left:8px} .nav__links a{ font-family:var(--font-ui);font-weight:500;text-transform:uppercase; letter-spacing:.14em;font-size:13px;color:var(--muted);padding:6px 0; border-bottom:2px solid transparent;transition:.15s; } .nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--ink);border-color:var(--accent)} .nav__right{margin-left:auto;display:flex;align-items:center;gap:18px} .nav__icon{ display:flex;align-items:center;gap:8px;font-family:var(--font-ui); text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:500;color:var(--muted); } .nav__icon:hover{color:var(--ink)} .cart-count{ display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px; background:var(--accent);color:var(--accent-ink);border-radius:999px; font-family:var(--font-mono);font-size:11px;font-weight:600; } /* ---- Placeholder imagery ---------------------------------- */ .ph{ position:relative; overflow:hidden; background:var(--panel-2); background-image:repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.025) 14px 28px); display:grid; place-items:center; isolation:isolate; } .ph::after{ /* registration corners */ content:""; position:absolute; inset:14px; border:1px dashed var(--line-2); pointer-events:none; } .ph__label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); text-align:center; padding:8px 14px; background:color-mix(in srgb,var(--paper) 60%,transparent); } /* ---- Stock bar -------------------------------------------- */ .stock{display:flex;flex-direction:column;gap:7px} .stock__meta{display:flex;justify-content:space-between;align-items:baseline; font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase} .stock__meta b{color:var(--hot);font-weight:600} .stock__track{height:7px;background:var(--panel-3);border:1px solid var(--line);border-radius:999px;overflow:hidden} .stock__fill{height:100%;background:var(--hot);border-radius:999px} /* ---- Countdown -------------------------------------------- */ .countdown{display:flex;gap:10px} .countdown__cell{ background:var(--panel-2); border:1px solid var(--line); border-radius:4px; padding:12px 0; min-width:74px; text-align:center; position:relative; } .countdown__num{ font-family:var(--font-mono); font-weight:600; font-size:clamp(26px,3vw,38px); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; } .countdown__lbl{display:block;font-family:var(--font-ui);text-transform:uppercase; letter-spacing:.16em;font-size:10px;color:var(--muted);margin-top:7px} .countdown--sm .countdown__cell{min-width:54px;padding:8px 0} .countdown--sm .countdown__num{font-size:22px} /* ---- Product card ----------------------------------------- */ .grid{display:grid;gap:22px} .grid--4{grid-template-columns:repeat(4,1fr)} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--2{grid-template-columns:repeat(2,1fr)} .card{ background:var(--panel); border:1px solid var(--line); border-radius:5px; overflow:hidden; transition:.18s ease; display:flex;flex-direction:column; position:relative; } .card:hover{border-color:var(--line-2);transform:translateY(-3px)} .card__media{aspect-ratio:1/1;position:relative} .card__media .ph{position:absolute;inset:0} .card__tag{ position:absolute;top:12px;left:12px;z-index:2; font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase; background:var(--paper);color:var(--ink);border:1px solid var(--line-2); padding:4px 8px;border-radius:3px;white-space:nowrap; } .card__tag--hot{background:var(--hot);color:var(--hot-ink);border-color:var(--hot)} .card__tag--new{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .card__sold{ position:absolute;inset:0;z-index:3;display:grid;place-items:center; background:color-mix(in srgb,var(--paper) 64%,transparent);backdrop-filter:grayscale(1); } .card__sold span{ font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.04em; font-size:26px;color:var(--ink);border:3px solid var(--ink);padding:8px 18px; transform:rotate(-7deg);box-shadow:0 0 0 4px var(--paper); } .card__body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1} .card__no{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--muted)} .card__name{font-family:var(--font-head);font-weight:700;font-size:19px;line-height:1.05;text-transform:uppercase} .card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:10px} .card__price{font-family:var(--font-mono);font-size:15px;color:var(--ink)} .card__cta{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:600;color:var(--accent)} /* ---- Misc / footer ---------------------------------------- */ .rule{height:1px;background:var(--line);border:0} .hot-text{color:var(--hot)} .footer{border-top:1px solid var(--line);background:var(--panel);padding:64px 0 36px;margin-top:40px} .footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px} .footer h5{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--muted);margin-bottom:16px;font-weight:600} .footer ul{list-style:none;display:flex;flex-direction:column;gap:10px} .footer a{color:var(--ink);font-size:14px;opacity:.8} .footer a:hover{opacity:1;color:var(--accent)} .footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px; margin-top:48px;padding-top:24px;border-top:1px solid var(--line); font-family:var(--font-mono);font-size:11.5px;color:var(--muted);flex-wrap:wrap} /* ---- Hidden-by-copy-mode helpers -------------------------- */ [data-copy="tame"] .edgy{display:none} [data-copy="edgy"] .tame{display:none} /* ---- Responsive ------------------------------------------- */ @media (max-width:1080px){ .grid--4{grid-template-columns:repeat(2,1fr)} .footer__grid{grid-template-columns:1fr 1fr} } @media (max-width:760px){ .nav__links{display:none} .grid--3,.grid--2{grid-template-columns:1fr} .section{padding:60px 0} .footer__grid{grid-template-columns:1fr 1fr} .wrap{padding:0 18px} }