/* ============================================================ Sketcut public pages — premium landing skin ------------------------------------------------------------ Loaded AFTER landing-assets/v3/public.css on every public page except the landing itself (which ships its own .skp styles). It does not replace public.css — it re-tokenises it. The whole public design system reads its colours, radii and shadows from custom properties, and every page-local style block (svc-*, cp-*, sg-*, policy-*) reads the same ones, so redefining the tokens on re-skins all of them at once. Component rules below only cover what tokens alone cannot express: the landing's type scale, its hairline-and-glow surfaces, and its header. The landing hero is a dark-only composition, so these pages are dark-only too — the appearance switcher is hidden rather than left inert (see main/sections/navbar.blade.php). ============================================================ */ /* ---------- tokens ---------- */ /* A stored "light" choice can still be on when a visitor arrives from a page that had the switcher; keep the root scrollbar and any root-level UA surfaces dark so they match the page. */ :root[data-premium]{ color-scheme:dark; background:#071013; } body.skp-pages{ /* Brand — same orange as the landing's --accent. */ --brand: #FF642E; --brand-hover: #FF7A4D; --brand-active: #E9541F; --brand-2: #FFB067; --brand-soft: rgba(255,100,46,.10); --on-brand: #1d170b; /* Ground: the landing's #071013 ink, with its panel steps. */ --bg: #071013; --surface: #0d181b; --surface-2: #091416; --surface-3: #111d20; --ink: #f4f4ef; --body: #8f9d9d; --muted: #758283; /* The svc- and cp- page blocks read --ink-muted, which public.css never defined; alias it so they stop falling back to inherit. */ --ink-muted: #8f9d9d; --line: rgba(255,255,255,.11); --line-strong: rgba(255,255,255,.2); /* Header + footer sit a step below the page ground. */ --chrome: #061012; --chrome-ink: #f4f4ef; --chrome-body: #a0adad; --chrome-line: rgba(255,255,255,.075); --chrome-soft: rgba(255,255,255,.05); /* Status — dark-legible values, so they hold whatever the stored theme choice was before these pages went dark-only. */ --success: #70d598; --warning: #eaa94e; --danger: #f07d7d; --info: #6fa8dc; --success-soft: rgba(112,213,152,.10); --warning-soft: rgba(234,169,78,.10); --danger-soft: rgba(240,125,125,.10); --shadow-sm: 0 6px 18px rgba(0,0,0,.35); --shadow: 0 22px 55px rgba(0,0,0,.42); --shadow-lg: 0 40px 110px rgba(0,0,0,.55); --grid-dot: rgba(255,255,255,.055); /* Shape — the landing rounds softer than the old public kit. */ --radius-xs: 6px; --radius-sm: 10px; --radius: 14px; --radius-lg: 18px; --nav-h: 72px; --ease: cubic-bezier(.2,.75,.2,1); background:var(--bg); color:var(--body); color-scheme:dark; } /* ---------- type ---------- */ body.skp-pages h1, body.skp-pages h2, body.skp-pages h3, body.skp-pages h4{ color:var(--ink); } body.skp-pages h1{ font-size:clamp(2.4rem, 5vw, 4.2rem); line-height:1.02; letter-spacing:-.05em; font-weight:750; } body.skp-pages h2{ font-size:clamp(1.8rem, 3.4vw, 2.9rem); line-height:1.06; letter-spacing:-.04em; font-weight:730; } body.skp-pages h3{ font-size:clamp(1.08rem, 1.7vw, 1.32rem); letter-spacing:-.022em; font-weight:700; } /* Arabic needs the loose tracking public.css already set for it. */ [dir="rtl"] body.skp-pages h1, [dir="rtl"] body.skp-pages h2, [dir="rtl"] body.skp-pages h3, [dir="rtl"] body.skp-pages h4{ letter-spacing:0; line-height:1.4; } body.skp-pages ::selection{ background:var(--brand); color:#fff; } body.skp-pages :focus-visible{ outline:2px solid var(--brand); outline-offset:2px; } /* The kicker becomes the landing's eyebrow: uppercase micro-label introduced by a short glowing rule. */ body.skp-pages .kicker, body.skp-pages .svc-kicker, body.skp-pages .cp-kicker{ display:inline-flex; align-items:center; gap:10px; font-size:.7rem; font-weight:720; letter-spacing:.17em; text-transform:uppercase; color:#aebaba; } body.skp-pages .kicker::before, body.skp-pages .svc-kicker::before, body.skp-pages .cp-kicker::before{ content:""; width:26px; height:1px; flex-shrink:0; background:var(--brand); box-shadow:0 0 14px rgba(255,100,46,.6); } [dir="rtl"] body.skp-pages .kicker, [dir="rtl"] body.skp-pages .svc-kicker, [dir="rtl"] body.skp-pages .cp-kicker{ letter-spacing:.04em; } /* ---------- header ---------- */ body.skp-pages .site-header{ background:rgba(7,16,19,.82); border-bottom:1px solid var(--chrome-line); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); } /* Seven menu items plus four action controls only just clear a 1280px viewport, and the drawer does not take over until 1023px — so the desktop row is kept deliberately tight. */ body.skp-pages .nav{ min-height:var(--nav-h); gap:12px; } body.skp-pages .nav__brand img{ height:27px; } body.skp-pages .nav__actions{ gap:8px; } body.skp-pages .nav__link{ font-size:.83rem; font-weight:500; color:#c3cdcd; border-radius:999px; padding:.5em .62em; } body.skp-pages .nav__link:hover{ color:#fff; background:rgba(255,255,255,.055); } body.skp-pages .nav__link[aria-current="page"]{ color:var(--brand); font-weight:650; } /* Controls become the landing's 40px pills. The extra .nav keeps these ahead of the generic .btn sizing further down this file. */ body.skp-pages .nav .nav__login, body.skp-pages .nav .menu-trigger, body.skp-pages .nav .nav__cta{ height:40px; min-height:40px; padding-block:0; padding-inline:1em; border-radius:999px; font-size:.82rem; font-weight:600; white-space:nowrap; } body.skp-pages .nav__login, body.skp-pages .menu-trigger{ display:inline-flex; align-items:center; border:1px solid var(--line); background:rgba(255,255,255,.02); color:var(--chrome-ink); } body.skp-pages .nav__login:hover, body.skp-pages .menu-trigger:hover{ border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.06); color:#fff; } body.skp-pages .nav__cta{ border-color:transparent; background:var(--brand); color:var(--on-brand); font-weight:720; box-shadow:0 10px 28px rgba(255,100,46,.24); } body.skp-pages .nav__cta:hover{ background:var(--brand-hover); border-color:transparent; color:var(--on-brand); transform:translateY(-1px); } body.skp-pages .menu-list{ background:rgba(10,20,23,.98); border-color:var(--line); border-radius:var(--radius-sm); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } body.skp-pages .menu-list a, body.skp-pages .menu-list [role="menuitemradio"]{ color:#dbe3e2; } body.skp-pages .menu-list a:hover, body.skp-pages .menu-list [role="menuitemradio"]:hover{ background:rgba(255,255,255,.06); color:#fff; } /* Dark-only pages: the appearance switcher would be inert. */ body.skp-pages [data-theme-switch]{ display:none; } /* ---------- page hero ---------- */ body.skp-pages .page-hero, body.skp-pages .hero, body.skp-pages .error-hero{ background:linear-gradient(#071013, #091416); border-bottom:1px solid var(--chrome-line); } body.skp-pages .page-hero{ padding-block:clamp(64px, 8vw, 108px) clamp(56px, 7vw, 92px); } /* Ambient orange bloom, the landing's .ambient-two moved behind the page title. Sits under the dot grid that public.css draws in ::after. */ body.skp-pages .page-hero::before, body.skp-pages .hero::before{ content:""; position:absolute; z-index:0; width:46vw; height:46vw; max-width:720px; max-height:720px; inset-inline-end:-14vw; top:-20vw; border-radius:50%; background:var(--brand); filter:blur(120px); opacity:.1; pointer-events:none; } body.skp-pages .page-hero h1{ margin-block-end:.28em; } body.skp-pages .page-hero p{ color:var(--body); font-size:clamp(1rem, 1.1vw, 1.12rem); line-height:1.75; } /* Only the photo variant gets a frame; materials.blade.php puts a bare token-coloured SVG in this slot. */ body.skp-pages figure.page-hero__art{ border:1px solid var(--line); box-shadow:var(--shadow); } body.skp-pages .breadcrumbs a{ color:var(--muted); } body.skp-pages .breadcrumbs a:hover{ color:var(--brand); } body.skp-pages .breadcrumbs [aria-current]{ color:var(--ink); } /* ---------- sections ---------- */ body.skp-pages .section{ padding-block:clamp(64px, 8vw, 116px); } body.skp-pages .section--tight{ padding-block:clamp(44px, 5vw, 72px); } body.skp-pages .section--soft{ background:var(--surface-2); border-block:1px solid var(--chrome-line); } body.skp-pages .section-head{ margin-block-end:48px; } body.skp-pages .section-head p{ color:var(--body); line-height:1.75; } /* ---------- buttons + links ---------- */ body.skp-pages .btn{ min-height:46px; padding:.7em 1.5em; border-radius:11px; font-size:.86rem; font-weight:700; letter-spacing:.005em; transition:transform .25s var(--ease), background .22s, border-color .22s, box-shadow .22s, color .22s; } body.skp-pages .btn--lg{ min-height:52px; padding:.85em 1.9em; font-size:.92rem; } body.skp-pages .btn--sm{ min-height:38px; padding:.5em 1.05em; font-size:.8rem; } body.skp-pages .btn:hover{ transform:translateY(-2px); } body.skp-pages .btn[disabled]:hover, body.skp-pages .btn.is-disabled:hover{ transform:none; } body.skp-pages .btn--primary{ background:var(--brand); border-color:transparent; color:var(--on-brand); box-shadow:0 16px 45px rgba(255,100,46,.17); } body.skp-pages .btn--primary:hover{ background:var(--brand-hover); border-color:transparent; color:var(--on-brand); } body.skp-pages .btn--primary:active{ background:var(--brand-active); border-color:transparent; } body.skp-pages .btn--outline, body.skp-pages .btn--light-outline{ border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.035); color:var(--ink); } body.skp-pages .btn--outline:hover, body.skp-pages .btn--light-outline:hover{ border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.07); color:#fff; } body.skp-pages .btn--ghost{ color:var(--ink); } body.skp-pages .btn--ghost:hover{ color:var(--brand); } body.skp-pages .link-more{ color:var(--brand); font-weight:650; } body.skp-pages .link-more:hover{ color:var(--brand-2); } /* ---------- surfaces ---------- */ body.skp-pages .card, body.skp-pages .tile, body.skp-pages .toolbar, body.skp-pages .formula__item, body.skp-pages .contact-info__row, body.skp-pages .feature-panel, body.skp-pages .faq details, body.skp-pages .svc-card, body.skp-pages .svc-filter, body.skp-pages .cp-offer, body.skp-pages .cp-panel{ background:linear-gradient(150deg, rgba(255,255,255,.03), rgba(255,255,255,.008)); border-color:var(--line); } body.skp-pages .card:hover, body.skp-pages .tile:hover, body.skp-pages .svc-card:hover{ border-color:rgba(255,100,46,.34); background:linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.014)); box-shadow:0 26px 60px rgba(0,0,0,.4); } body.skp-pages .card--flat:hover{ border-color:var(--line); box-shadow:none; } body.skp-pages .card__icon{ border-radius:12px; border:1px solid var(--line); background:rgba(255,100,46,.08); color:var(--brand); } body.skp-pages a.card:hover h3, body.skp-pages a.card:hover h4, body.skp-pages a.tile:hover .tile__body h3{ color:var(--brand); } body.skp-pages .tile__visual{ background:var(--swatch, var(--surface-3)); } body.skp-pages .tile__price{ color:var(--ink); } body.skp-pages .feature-panel figure, body.skp-pages .card--media figure{ background:var(--surface-3); } body.skp-pages .empty-state{ background:rgba(255,255,255,.018); border-style:dashed; border-color:var(--line-strong); } body.skp-pages .skeleton{ background:linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.075) 50%, rgba(255,255,255,.03) 75%); background-size:200% 100%; } /* ---------- trust strip: the landing's credibility rail ---------- */ body.skp-pages .trust-strip{ background:var(--surface-2); border-block-color:var(--chrome-line); } body.skp-pages .trust-strip__item + .trust-strip__item{ border-inline-start-color:var(--chrome-line); } body.skp-pages .trust-strip__item svg{ color:var(--brand); } body.skp-pages .trust-strip__item h3{ font-size:1rem; } body.skp-pages .trust-strip__item p{ color:var(--muted); } @media (max-width: 991px){ body.skp-pages .trust-strip__item:nth-child(1), body.skp-pages .trust-strip__item:nth-child(2){ border-block-end-color:var(--chrome-line); } } @media (max-width: 479px){ body.skp-pages .trust-strip__item + .trust-strip__item{ border-block-start-color:var(--chrome-line); } } /* ---------- steps ---------- */ body.skp-pages .step__num{ background:rgba(255,100,46,.08); border-color:rgba(255,100,46,.3); color:var(--brand); } body.skp-pages .step__icon{ color:var(--ink); } body.skp-pages .step p{ color:var(--muted); } @media (min-width: 992px){ body.skp-pages .step:not(:last-child)::after{ border-top-color:var(--line); } } /* ---------- formula (pricing) ---------- */ body.skp-pages .formula__item svg{ color:var(--ink); } body.skp-pages .formula__item--total{ border-color:rgba(255,100,46,.45); background:linear-gradient(150deg, rgba(255,100,46,.09), rgba(255,100,46,.02)); } body.skp-pages .formula__item--total svg{ color:var(--brand); } body.skp-pages .formula__op{ color:var(--muted); } /* ---------- chips, pills, badges ---------- */ body.skp-pages .chip, body.skp-pages .filter-pill{ background:rgba(255,255,255,.03); border-color:var(--line); color:var(--body); } body.skp-pages .filter-pill:hover{ border-color:rgba(255,255,255,.32); color:var(--ink); } body.skp-pages .chip--brand, body.skp-pages .filter-pill.on, body.skp-pages .filter-pill[aria-current="true"]{ background:rgba(255,100,46,.1); border-color:rgba(255,100,46,.42); color:var(--brand-2); } body.skp-pages .badge--in{ background:var(--success-soft); color:var(--success); } body.skp-pages .badge--low{ background:var(--warning-soft); color:var(--warning); } body.skp-pages .badge--out{ background:var(--danger-soft); color:var(--danger); } body.skp-pages .alert--success{ background:var(--success-soft); color:var(--success); border-color:rgba(112,213,152,.22); } body.skp-pages .alert--error{ background:var(--danger-soft); color:var(--danger); border-color:rgba(240,125,125,.22); } /* ---------- FAQ ---------- */ body.skp-pages .faq summary{ color:var(--ink); } body.skp-pages .faq summary::after{ background:rgba(255,255,255,.06); color:var(--body); } body.skp-pages .faq details[open] summary{ border-bottom-color:var(--line); } body.skp-pages .faq details[open] summary::after{ background:var(--brand); color:var(--on-brand); } /* ---------- CTA band: the landing's final-cta ---------- */ body.skp-pages .cta-band{ background:#0a1517; border:1px solid var(--line); padding:clamp(48px, 6vw, 80px) clamp(24px, 4vw, 56px); color:var(--body); } body.skp-pages .cta-band::before{ content:""; position:absolute; z-index:0; width:55%; height:120%; top:50%; inset-inline-start:50%; transform:translate(-50%,-50%); border-radius:50%; background:rgba(255,100,46,.1); filter:blur(120px); pointer-events:none; } [dir="rtl"] body.skp-pages .cta-band::before{ transform:translate(50%,-50%); } body.skp-pages .cta-band h2{ color:var(--ink); font-size:clamp(2rem, 4.4vw, 3.5rem); letter-spacing:-.05em; line-height:1; } [dir="rtl"] body.skp-pages .cta-band h2{ letter-spacing:0; line-height:1.4; } body.skp-pages .cta-band p{ color:var(--body); } /* ---------- forms ---------- */ body.skp-pages .form-field label{ color:var(--ink); } body.skp-pages .form-field input, body.skp-pages .form-field select, body.skp-pages .form-field textarea, body.skp-pages .svc-input, body.skp-pages .svc-select, body.skp-pages .sg-input, body.skp-pages .sg-textarea, body.skp-pages .qty input, body.skp-pages input[type="search"], body.skp-pages input[type="email"], body.skp-pages input[type="text"]{ background:rgba(255,255,255,.03); border-color:var(--line); color:var(--ink); } body.skp-pages .form-field input:focus, body.skp-pages .form-field select:focus, body.skp-pages .form-field textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,100,46,.16); } body.skp-pages .form-field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238f9d9d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } body.skp-pages .form-field input::placeholder, body.skp-pages .form-field textarea::placeholder{ color:var(--muted); } body.skp-pages option{ background:#0d181b; color:var(--ink); } body.skp-pages .qty{ background:rgba(255,255,255,.03); border-color:var(--line); } body.skp-pages .qty button{ color:var(--ink); } body.skp-pages .qty button:hover{ background:rgba(255,255,255,.07); } /* ---------- tables, cart, pagination ---------- */ body.skp-pages .compare-table th, body.skp-pages .compare-table td{ border-color:var(--line); background:rgba(255,255,255,.02); } body.skp-pages .compare-table th, body.skp-pages .compare-table td:first-child{ background:rgba(255,255,255,.045); color:var(--ink); } body.skp-pages .compare-bar{ background:rgba(9,20,22,.96); border-top-color:var(--line); backdrop-filter:blur(14px); } body.skp-pages .compare-check{ background:rgba(9,20,22,.9); border-color:var(--line); color:var(--body); } body.skp-pages .cart-item{ border-bottom-color:var(--line); } body.skp-pages .cart-item__img{ background:var(--surface-3); border-color:var(--line); } body.skp-pages .cart-item__name, body.skp-pages .cart-item__price, body.skp-pages .summary-row span:last-child, body.skp-pages .summary-row--total{ color:var(--ink); } body.skp-pages .summary-row--total{ border-top-color:var(--line); } body.skp-pages .pagination .page-item .page-link{ background:rgba(255,255,255,.03); border-color:var(--line); color:var(--ink); } body.skp-pages .pagination .page-item .page-link:hover{ border-color:rgba(255,255,255,.32); } body.skp-pages .pagination .page-item.active .page-link{ background:var(--brand); border-color:transparent; color:var(--on-brand); } /* ---------- legal pages ---------- */ body.skp-pages .legal-toc{ border-inline-end-color:var(--line); } body.skp-pages .legal-toc a:hover{ background:rgba(255,255,255,.04); color:var(--ink); } body.skp-pages .legal-body h2{ border-top-color:var(--line); font-size:clamp(1.25rem, 1.9vw, 1.6rem); } body.skp-pages hr{ border-top-color:var(--line); } /* ---------- page-local systems ---------- */ /* Services & Gigs hero: same composition as the landing hero. */ body.skp-pages .svc-hero{ background: radial-gradient(circle at 84% 14%, rgba(255,100,46,.16), transparent 38%), linear-gradient(#071013, #091416); border-bottom:1px solid var(--chrome-line); } body.skp-pages .svc-hero h1{ color:var(--ink); } body.skp-pages .svc-hero p{ color:var(--body); } body.skp-pages .svc-band{ border-bottom-color:var(--chrome-line); } body.skp-pages .svc-count{ background:rgba(255,255,255,.03); border-color:var(--line); } body.skp-pages .svc-country{ background:rgba(9,20,22,.8); border-color:var(--line); color:var(--ink); } body.skp-pages .svc-mode--custom{ color:#7fb6dd; } body.skp-pages .svc-mode--special{ color:var(--warning); } body.skp-pages .svc-empty{ background:rgba(255,255,255,.018); border-color:var(--line-strong); } /* The country chip hardcodes white on brand orange (2.95:1). */ body.skp-pages .svc-country-code{ color:var(--on-brand); } /* "Made to order" badge was tuned for a light ground (#138866). */ body.skp-pages .community-mode{ background:rgba(255,100,46,.1); border-color:rgba(255,100,46,.32); color:var(--brand-2); } body.skp-pages .community-mode--make{ background:var(--success-soft); border-color:rgba(112,213,152,.32); color:var(--success); } /* Community post + gig detail panels. */ body.skp-pages .cp-stage, body.skp-pages .sg-cover{ background:var(--surface-3); border-color:var(--line); } body.skp-pages .policy-hero{ background:linear-gradient(#0a1517, #091416); border-color:var(--line); } /* ---------- footer ---------- */ body.skp-pages .site-footer{ border-top:1px solid var(--chrome-line); } body.skp-pages .site-footer h3, body.skp-pages .site-footer h4{ color:var(--chrome-ink); font-size:.78rem; font-weight:720; letter-spacing:.13em; text-transform:uppercase; } [dir="rtl"] body.skp-pages .site-footer h3, [dir="rtl"] body.skp-pages .site-footer h4{ letter-spacing:.02em; } body.skp-pages .footer-social a{ border:1px solid var(--chrome-line); background:transparent; } body.skp-pages .footer-social a:hover{ background:var(--brand); border-color:transparent; color:var(--on-brand); } body.skp-pages .footer-news input{ background:rgba(255,255,255,.04); border-color:var(--chrome-line); } body.skp-pages .footer-bottom{ border-top-color:var(--chrome-line); } /* ---------- mobile drawer ---------- */ @media (max-width: 1023px){ body.skp-pages.nav-open .nav__collapse{ background:#081215; border-inline-start-color:var(--line); } body.skp-pages.nav-open .nav__menu .nav__link{ border-radius:0; } body.skp-pages.nav-open .nav__login, body.skp-pages.nav-open .menu-trigger, body.skp-pages.nav-open .nav__actions .nav__cta{ border-radius:999px; } body.skp-pages .nav__close{ background:transparent; border:0; } } @media (prefers-reduced-motion: reduce){ body.skp-pages .btn:hover, body.skp-pages .nav__cta:hover, body.skp-pages .card:hover, body.skp-pages .tile:hover, body.skp-pages .svc-card:hover{ transform:none; } }