/* ========================================================================== WeekendCAD — site styles. Layered on top of _ds/nocturne-.../styles.css, which supplies --font-body and the --radius-* tokens. Everything below is the Weekendcad Site design translated from its inline styles into real CSS. ========================================================================== */ /* --- Theme --------------------------------------------------------------- The design ships two complete palettes ("Light gray" and "Black cards"). Light gray is the default; the dark palette follows the visitor's system preference. Either can be pinned with data-wc-theme on . ------------------------------------------------------------------------ */ :root, [data-wc-theme="gray"] { --wc-bg: #ececee; --wc-text: #1b1b1d; --wc-mid: #3c3d41; --wc-muted: #6b6c70; --wc-faint: #8a8b8f; --wc-line: #d6d6d9; --wc-soft: #cfd0d3; --wc-card: #f6f6f7; --wc-card-line: #e0e0e3; --wc-plate: #fafafa; --wc-nav-hover: #e0e0e3; --wc-btn-hover-bg: #1b1b1d; --wc-btn-hover-text: #fafafa; --wc-strip-bg: #1b1b1d; --wc-strip-text: #b9babd; --wc-strip-line: #55565b; --wc-strip-link: #f2f2f3; --wc-header-bg: rgba(236,236,238,0.88); --wc-nav-idle: #77787c; --wc-scheme: light; } [data-wc-theme="dark"] { --wc-bg: #08080a; --wc-text: #f2f2f3; --wc-mid: #d0d1d4; --wc-muted: #a0a1a5; --wc-faint: #75767a; --wc-line: #232326; --wc-soft: #3a3a3e; --wc-card: #131316; --wc-card-line: #26262a; --wc-plate: #f2f2f3; --wc-nav-hover: #1c1c20; --wc-btn-hover-bg: #f2f2f3; --wc-btn-hover-text: #08080a; --wc-strip-bg: #f2f2f3; --wc-strip-text: #4a4b4f; --wc-strip-line: #c8c9cc; --wc-strip-link: #08080a; --wc-header-bg: rgba(8,8,10,0.86); --wc-nav-idle: #8a8b8f; --wc-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-wc-theme="gray"]) { --wc-bg: #08080a; --wc-text: #f2f2f3; --wc-mid: #d0d1d4; --wc-muted: #a0a1a5; --wc-faint: #75767a; --wc-line: #232326; --wc-soft: #3a3a3e; --wc-card: #131316; --wc-card-line: #26262a; --wc-plate: #f2f2f3; --wc-nav-hover: #1c1c20; --wc-btn-hover-bg: #f2f2f3; --wc-btn-hover-text: #08080a; --wc-strip-bg: #f2f2f3; --wc-strip-text: #4a4b4f; --wc-strip-line: #c8c9cc; --wc-strip-link: #08080a; --wc-header-bg: rgba(8,8,10,0.86); --wc-nav-idle: #8a8b8f; --wc-scheme: dark; } } /* --- Base ---------------------------------------------------------------- */ html, body { margin: 0; -webkit-font-smoothing: antialiased; } body { background: var(--wc-bg); color-scheme: var(--wc-scheme); } a { text-decoration: none; } ::selection { background: rgba(127,127,131,0.28); } :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } @keyframes wcFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } } .wc-root { min-height: 100vh; background: var(--wc-bg); color: var(--wc-text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; display: flex; flex-direction: column; } /* --- Announcement strip --------------------------------------------------- */ .wc-strip { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 9px 20px; background: var(--wc-strip-bg); font-size: 12.5px; text-align: center; } .wc-strip-badge { border: 1px solid var(--wc-strip-line); color: var(--wc-strip-text); border-radius: 999px; padding: 1px 8px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .wc-strip-note { color: var(--wc-strip-text); } .wc-strip-link { color: var(--wc-strip-link); border-bottom: 1px solid var(--wc-strip-line); } /* --- Header --------------------------------------------------------------- */ .wc-header { position: sticky; top: 0; z-index: 20; background: var(--wc-header-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--wc-line); } .wc-header-inner { max-width: 1040px; margin: 0 auto; padding: 0 22px; /* min-height, not height: at desktop this is the design's 64px exactly, but it lets the bar grow instead of spilling once the nav wraps. */ min-height: 64px; display: flex; align-items: center; gap: 18px; } @media (max-width: 599px) { .wc-header-inner { padding: 8px 22px; gap: 12px; } } .wc-logo { display: flex; align-items: center; flex: 0 0 auto; } .wc-logo img { height: 30px; width: auto; display: block; } /* Logo swaps with the palette — the design's sc-if, done in CSS. */ .wc-logo .wc-logo-dark { display: none; } [data-wc-theme="dark"] .wc-logo .wc-logo-light { display: none; } [data-wc-theme="dark"] .wc-logo .wc-logo-dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-wc-theme="gray"]) .wc-logo .wc-logo-light { display: none; } :root:not([data-wc-theme="gray"]) .wc-logo .wc-logo-dark { display: block; } } .wc-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; } .wc-nav-link { font-size: 13px; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--wc-nav-idle); } .wc-nav-link:hover { background: var(--wc-nav-hover); color: var(--wc-text); } .wc-nav-link[aria-current="page"] { color: var(--wc-text); } /* --- Buttons -------------------------------------------------------------- */ .wc-btn { display: inline-flex; align-items: center; font-size: 14px; padding: 12px 22px; min-height: 44px; border: 1px solid transparent; border-radius: var(--radius-md); } .wc-btn--primary { border-color: currentColor; color: var(--wc-text); } .wc-btn--primary:hover { background: var(--wc-btn-hover-bg); color: var(--wc-btn-hover-text); } .wc-btn--ghost { border-color: var(--wc-soft); color: var(--wc-mid); } .wc-btn--ghost:hover { background: var(--wc-nav-hover); } .wc-btn--nav { font-size: 13px; padding: 8px 14px; min-height: 40px; margin-left: 6px; } .wc-btn--compact { padding: 11px 20px; } .wc-btn--chip { font-size: 13px; padding: 9px 14px; } /* --- Main / sections ------------------------------------------------------ */ .wc-main { flex: 1 0 auto; max-width: 1040px; width: 100%; margin: 0 auto; padding: 0 22px; } .wc-page { animation: wcFade 0.5s ease both; } .wc-page[hidden] { display: none; } .wc-page--inner { padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 7vw, 96px); } .wc-kicker { margin: 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wc-faint); } .wc-eyebrow { margin: 0 0 12px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wc-faint); } .wc-pill { margin: 0 0 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wc-mid); border: 1px solid var(--wc-soft); border-radius: 999px; padding: 3px 10px; } .wc-title { margin: 0 0 14px; font-size: clamp(30px, 5vw, 48px); font-weight: 500; letter-spacing: -0.025em; } .wc-lead { margin: 0 0 clamp(28px, 5vw, 48px); max-width: 52ch; font-size: 16px; color: var(--wc-muted); } /* --- Home: hero ----------------------------------------------------------- */ .wc-hero { padding: clamp(48px, 9vw, 108px) 0 0; display: flex; flex-direction: column; gap: 22px; max-width: 62ch; } .wc-hero h1 { margin: 0; font-size: clamp(34px, 5.6vw, 60px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.03; } .wc-hero-lead { margin: 0; max-width: 52ch; font-size: clamp(15.5px, 1.6vw, 18px); color: var(--wc-muted); text-wrap: pretty; } .wc-cta-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 2px; } .wc-cta-note { font-size: 13px; color: var(--wc-faint); } /* --- Home: plate + caption ------------------------------------------------ */ .wc-plate { margin-top: clamp(32px, 5vw, 56px); background: var(--wc-plate); border: 1px solid var(--wc-card-line); border-radius: var(--radius-lg); padding: clamp(16px, 3vw, 36px); } .wc-plate img { width: 100%; height: auto; } .wc-caption { margin: 10px 0 0; font-size: 11.5px; color: var(--wc-faint); } /* --- Cards + grids -------------------------------------------------------- */ .wc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(14px, 2vw, 20px); } .wc-grid--features { margin-top: clamp(48px, 9vw, 104px); } .wc-card { display: flex; flex-direction: column; gap: 8px; background: var(--wc-card); border: 1px solid var(--wc-card-line); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 28px); } .wc-card h2 { margin: 0; font-size: 16px; font-weight: 500; } .wc-card p { margin: 0; font-size: 14px; color: var(--wc-muted); } /* --- Home: steps ---------------------------------------------------------- */ .wc-steps { margin-top: clamp(14px, 2vw, 20px); background: var(--wc-card); border: 1px solid var(--wc-card-line); border-radius: var(--radius-lg); padding: clamp(22px, 3.5vw, 40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(18px, 3vw, 32px); } .wc-step { display: flex; flex-direction: column; gap: 6px; } .wc-step-n { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wc-faint); } .wc-step h3 { margin: 0; font-size: 15.5px; font-weight: 500; } .wc-step p { margin: 0; font-size: 13.5px; color: var(--wc-muted); } /* --- Split panels (services promo, beta band) ----------------------------- */ .wc-panel { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; border-radius: var(--radius-lg); } .wc-panel--outline { margin: clamp(14px, 2vw, 20px) 0 clamp(40px, 7vw, 88px); border: 1px solid var(--wc-line); padding: clamp(22px, 3.5vw, 36px); } .wc-panel--filled { margin-top: clamp(14px, 2vw, 20px); background: var(--wc-card); border: 1px solid var(--wc-card-line); padding: clamp(22px, 3.5vw, 36px); } .wc-panel-text { display: flex; flex-direction: column; gap: 6px; } .wc-panel-text--narrow { max-width: 52ch; } .wc-panel-text h2 { margin: 0; font-size: clamp(19px, 2.4vw, 25px); font-weight: 500; letter-spacing: -0.02em; } .wc-panel-text p { margin: 0; font-size: 14px; color: var(--wc-muted); } /* --- Product -------------------------------------------------------------- */ .wc-lead--product { max-width: 54ch; font-size: clamp(15px, 1.6vw, 17px); text-wrap: pretty; } /* --- Services ------------------------------------------------------------- */ .wc-lead--services { max-width: 52ch; } .wc-svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(14px, 2vw, 20px); align-items: start; } .wc-svc { display: flex; flex-direction: column; background: var(--wc-card); border: 1px solid var(--wc-card-line); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 32px); } .wc-svc--a { gap: 16px; } .wc-svc--b { gap: 14px; } .wc-svc h2 { margin: 0; font-size: clamp(19px, 2.4vw, 24px); font-weight: 500; letter-spacing: -0.02em; } .wc-svc > p { margin: 0; font-size: 15px; color: var(--wc-muted); } .wc-dashlist { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 14px; color: var(--wc-mid); } .wc-dashlist li { display: flex; gap: 10px; align-items: baseline; } .wc-dashlist li::before { content: ""; width: 14px; height: 1px; flex: 0 0 14px; background: currentColor; transform: translateY(-4px); } .wc-inset { background: var(--wc-plate); border: 1px solid var(--wc-card-line); border-radius: var(--radius-md); padding: clamp(10px, 2vw, 20px); } .wc-inset img { width: 100%; height: auto; } .wc-svc figcaption { margin: 0; font-size: 11.5px; color: var(--wc-faint); } .wc-subhead { margin: clamp(32px, 5vw, 56px) 0 16px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wc-faint); } .wc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(12px, 1.6vw, 18px); } .wc-tile { background: var(--wc-card); border: 1px solid var(--wc-card-line); border-radius: var(--radius-md); padding: 18px; font-size: 14px; color: var(--wc-mid); } /* --- About ---------------------------------------------------------------- */ .wc-about { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 3vw, 32px); align-items: start; } .wc-about-copy { display: flex; flex-direction: column; gap: 16px; } .wc-about-copy h1 { margin: 0; font-size: clamp(30px, 5vw, 48px); font-weight: 500; letter-spacing: -0.025em; } .wc-about-copy p { margin: 0; font-size: 15px; color: var(--wc-muted); } .wc-about-copy p:first-of-type { font-size: 16px; color: var(--wc-mid); } .wc-facts { display: grid; gap: 0; background: var(--wc-card); border: 1px solid var(--wc-card-line); border-radius: var(--radius-lg); padding: clamp(18px, 3vw, 28px); } .wc-fact { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--wc-line); padding: 12px 0; font-size: 14px; } .wc-fact dt { color: var(--wc-faint); } .wc-fact dd { margin: 0; color: var(--wc-text); text-align: right; } /* --- Contact -------------------------------------------------------------- */ .wc-lead--contact { max-width: 48ch; } .wc-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(14px, 2vw, 20px); } .wc-contact-card { display: flex; flex-direction: column; gap: 20px; background: var(--wc-card); border: 1px solid var(--wc-card-line); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 32px); } .wc-field { display: flex; flex-direction: column; gap: 4px; } .wc-field--stack { gap: 8px; } .wc-field--text { gap: 6px; } .wc-label { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wc-faint); } .wc-contact-value { font-size: clamp(17px, 2.2vw, 22px); color: var(--wc-text); } .wc-field p { margin: 0; font-size: 15px; color: var(--wc-mid); } .wc-field p.wc-address { max-width: 34ch; } .wc-links { display: flex; gap: 8px; flex-wrap: wrap; } /* --- Legal ---------------------------------------------------------------- */ .wc-lead--legal { margin-bottom: clamp(24px, 4vw, 40px); } .wc-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 32px); } .wc-tab { display: inline-flex; align-items: center; font-size: 13px; padding: 9px 16px; min-height: 44px; border: 1px solid var(--wc-soft); border-radius: var(--radius-md); background: transparent; color: var(--wc-muted); } .wc-tab:hover { background: var(--wc-nav-hover); } .wc-tab[aria-current="page"] { border-color: currentColor; background: var(--wc-card); color: var(--wc-text); } .wc-doc { background: var(--wc-card); border: 1px solid var(--wc-card-line); border-radius: var(--radius-lg); padding: clamp(22px, 3.5vw, 40px); max-width: 74ch; } .wc-doc[hidden] { display: none; } .wc-doc h1.wc-doc-title { margin: 0 0 6px; font-size: clamp(20px, 2.6vw, 26px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; } .wc-doc-note { margin: 0 0 clamp(18px, 3vw, 28px); font-size: 13.5px; color: var(--wc-faint); } .wc-doc-body { display: flex; flex-direction: column; gap: 22px; } .wc-doc-body section { display: flex; flex-direction: column; gap: 7px; } .wc-doc-body h2 { margin: 0; font-size: 15.5px; font-weight: 500; } .wc-doc-body p { margin: 0; font-size: 14.5px; color: var(--wc-muted); text-wrap: pretty; } .wc-doc-foot { margin: clamp(22px, 3.5vw, 32px) 0 0; padding-top: 16px; border-top: 1px solid var(--wc-line); font-size: 13.5px; color: var(--wc-muted); } .wc-doc-foot a { color: var(--wc-text); border-bottom: 1px solid var(--wc-soft); } /* --- Footer --------------------------------------------------------------- */ .wc-footer { border-top: 1px solid var(--wc-line); margin-top: auto; } .wc-footer-inner { max-width: 1040px; margin: 0 auto; padding: 24px 22px 32px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--wc-faint); } .wc-footer-links { display: flex; gap: 14px; flex-wrap: wrap; } .wc-footer-links a { color: var(--wc-muted); } .wc-footer-links a:hover { color: var(--wc-text); } /* --- Skip link ------------------------------------------------------------ */ .wc-skip { position: absolute; left: -9999px; top: 0; z-index: 40; padding: 10px 16px; background: var(--wc-card); color: var(--wc-text); border: 1px solid var(--wc-soft); border-radius: var(--radius-md); } .wc-skip:focus { left: 8px; top: 8px; }