/* ========================================================================== SCube Global — Design System Stylesheet "Built in layers." — three slabs, three blues, three typefaces. Derived from: S-Cube Global Design System (BRD-04, Rev 2) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Karla:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root{ /* Slab blues — light to dark */ --slab-50: #EEF5FD; --slab-100: #C6DCF5; --slab-200: #9EC4EE; --slab-400: #77A6DE; --slab-600: #4A7FC1; --slab-800: #2C5590; /* Paper & ink */ --paper: #FFFDF9; --canvas: #F5EFE4; --rule: #DFD5C4; --muted: #786A5A; --ink: #1C1814; --body-text: #4A4139; /* Studio accent — Commissioned Art only */ --rust: #B4462A; --rust-pressed: #8E3520; /* Type */ --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --font-sans: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Type scale */ --size-display: clamp(2.25rem, 1.6rem + 3vw, 3.375rem); --size-h2: clamp(1.6rem, 1.35rem + 1.3vw, 1.9375rem); --size-h3: 1.25rem; --size-body: 1rem; --size-small: 0.8125rem; --size-eyebrow: 0.625rem; /* Spacing */ --gap-xs: 0.5rem; --gap-sm: 1rem; --gap-md: 1.75rem; --gap-lg: 3rem; --gap-xl: 5.5rem; --container: 1240px; --radius: 14px; --radius-sm: 8px; --shadow-sm: 0 1px 2px rgba(28,24,20,0.06), 0 1px 1px rgba(28,24,20,0.04); --shadow-md: 0 10px 30px -12px rgba(28,24,20,0.18); --shadow-lg: 0 24px 60px -20px rgba(28,24,20,0.28); --ease: cubic-bezier(.22,.61,.36,1); } /* Commissioned Art pages swap the accent to rust via this class on */ body.studio-theme{ --accent: var(--rust); --accent-pressed: var(--rust-pressed); } body{ --accent: var(--slab-600); --accent-pressed: var(--slab-800); } /* ---------------------------------- Reset -------------------------------- */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; background: var(--paper); color: var(--body-text); font-family: var(--font-sans); font-size: var(--size-body); line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration: none; } ul{ list-style: none; margin:0; padding:0; } button{ font-family: inherit; cursor:pointer; } input, textarea, select{ font-family: inherit; font-size: 1rem; } h1,h2,h3,h4{ font-family: var(--font-serif); color: var(--ink); margin: 0 0 0.5em; font-weight: 600; letter-spacing: -0.022em; line-height:1.15; } h1{ font-size: var(--size-display); letter-spacing: -0.028em; line-height:1.04; font-weight: 600; } h2{ font-size: var(--size-h2); } h3{ font-size: var(--size-h3); letter-spacing:-0.018em; } p{ margin: 0 0 1em; max-width: 68ch; } .container{ max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; } section{ padding: var(--gap-xl) 0; } .section-tight{ padding: var(--gap-lg) 0; } /* Eyebrow / mono metadata label */ .eyebrow{ font-family: var(--font-mono); font-size: var(--size-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display:inline-flex; align-items:center; gap: 0.6em; margin-bottom: 1em; } .eyebrow::before{ content:""; width: 22px; height: 2px; background: var(--accent); display:inline-block; } .lede{ font-size: 1.125rem; color: var(--muted); max-width: 60ch; } .center{ text-align:center; margin-left:auto; margin-right:auto; } /* ---------------------------------- Buttons ------------------------------ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:0.5em; font-family: var(--font-sans); font-weight:700; font-size: 0.95rem; padding: 0.85em 1.6em; border-radius: 999px; border:1.5px solid transparent; transition: transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); white-space: nowrap; } .btn-primary{ background: var(--slab-800); color: var(--paper); } .btn-primary:hover{ background: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-studio.btn-primary{ background: var(--rust); } .btn-studio.btn-primary:hover{ background: var(--rust-pressed); } .btn-secondary{ background: transparent; color: var(--ink); border-color: var(--rule); } .btn-secondary:hover{ border-color: var(--ink); transform: translateY(-1px); } .btn-ghost{ background:transparent; color: var(--slab-800); padding: 0.85em 0.2em; } .btn-ghost::after{ content:"→"; margin-left:0.4em; transition: transform .18s var(--ease); display:inline-block; } .btn-ghost:hover::after{ transform: translateX(4px); } .btn-block{ width:100%; } .btn[disabled]{ opacity:.55; cursor:not-allowed; } .btn-sm{ padding:0.6em 1.2em; font-size:0.85rem; } /* ---------------------------------- Header -------------------------------- */ .site-header{ position: sticky; top:0; z-index: 100; background: rgba(255,253,249,0.88); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--rule); } .header-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; } .brand{ display:flex; align-items:center; gap:0.65rem; } .brand-logo{ height:38px; width:auto; display:block; } .nav-primary{ display:flex; align-items:center; gap: 0.1rem; } .nav-primary > li{ position:relative; } .nav-link{ display:flex; align-items:center; gap:0.3em; white-space:nowrap; font-weight:600; font-size:0.84rem; color: var(--ink); padding: 0.55rem 0.6rem; border-radius: 999px; } .nav-link:hover, .nav-link.active{ background: var(--canvas); color: var(--slab-800); } .nav-primary .caret{ font-size:0.6em; transition: transform .2s var(--ease); } .has-dropdown:hover .caret{ transform: rotate(180deg); } .dropdown{ position:absolute; top: calc(100% + 6px); left:0; background: var(--paper); border:1px solid var(--rule); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); min-width: 240px; padding: 0.5rem; opacity:0; visibility:hidden; transform: translateY(6px); transition: all .18s var(--ease); } .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform: translateY(0); } .dropdown a{ display:block; padding: 0.6rem 0.75rem; border-radius:6px; font-weight:600; font-size:0.9rem; color: var(--body-text); } .dropdown a:hover{ background: var(--canvas); color: var(--slab-800); } .dropdown .dd-desc{ display:block; font-weight:400; font-size:0.78rem; color:var(--muted); margin-top:2px; } .header-cta{ display:flex; align-items:center; gap:0.75rem; } .icon-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; } .icon-btn:hover{ background:var(--canvas); } .cart-count{ position:absolute; top:-2px; right:-2px; background:var(--slab-800); color:var(--paper); font-family: var(--font-mono); font-size:0.6rem; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .menu-toggle{ display:none; } /* Mobile nav */ @media (max-width: 940px){ .nav-primary{ position:fixed; inset: 76px 0 0 0; background: var(--paper); flex-direction:column; align-items:stretch; gap:0; padding:1rem 1.25rem 2rem; overflow-y:auto; transform: translateX(100%); transition: transform .28s var(--ease); } .nav-primary.open{ transform: translateX(0); } .nav-primary > li{ border-bottom:1px solid var(--rule); } .nav-link{ width:100%; padding:1rem 0.25rem; border-radius:0; } .nav-link:hover, .nav-link.active{ background:none; } .dropdown{ position:static; box-shadow:none; border:none; opacity:1; visibility:visible; transform:none; max-height:0; overflow:hidden; padding:0; transition: max-height .25s var(--ease), padding .25s var(--ease); } .has-dropdown.open .dropdown{ max-height:600px; padding:0.25rem 0 0.75rem; } .menu-toggle{ display:flex; flex-direction:column; gap:5px; width:40px; height:40px; align-items:center; justify-content:center; border:1px solid var(--rule); border-radius:8px; background:none; } .menu-toggle span{ width:18px; height:2px; background:var(--ink); transition: all .2s var(--ease); } .menu-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .menu-toggle.open span:nth-child(2){ opacity:0; } .menu-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } .header-cta .btn-secondary{ display:none; } } @media (min-width: 941px){ .menu-toggle{ display:none; } } /* ---------------------------------- Hero ---------------------------------- */ .hero{ position:relative; overflow:hidden; padding: var(--gap-xl) 0 var(--gap-lg); background: linear-gradient(180deg, var(--canvas) 0%, var(--paper) 78%); } .hero-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap-lg); align-items:center; } .hero h1{ margin-bottom:0.4em; } .hero-actions{ display:flex; gap:0.9rem; margin-top:1.75rem; flex-wrap:wrap; } .hero-stats{ display:flex; gap: var(--gap-lg); margin-top: var(--gap-lg); flex-wrap:wrap; } .hero-stats .stat b{ font-family: var(--font-serif); font-size:1.8rem; color:var(--ink); display:block; } .hero-stats .stat span{ font-size:0.82rem; color:var(--muted); } .hero-visual{ display:flex; align-items:center; justify-content:center; } .hero-mark-tile{ width:100%; max-width:340px; filter: drop-shadow(0 24px 44px rgba(28,24,20,0.26)); } /* Tiled mark pattern — section divider, 8% opacity per brand sheet */ .slab-pattern{ background-image: url('../images/logo/scube-global-mark.png'); background-repeat: repeat; background-size: 64px 64px; opacity:0.08; position:absolute; inset:0; pointer-events:none; } .pattern-band{ position:relative; background: var(--ink); overflow:hidden; } .pattern-band .container{ position:relative; z-index:1; } /* ---------------------------------- Cards ---------------------------------- */ .grid{ display:grid; gap: var(--gap-md); } .grid-2{ grid-template-columns: repeat(2, 1fr); } .grid-3{ grid-template-columns: repeat(3, 1fr); } .grid-4{ grid-template-columns: repeat(4, 1fr); } @media (max-width: 940px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } .hero-grid{ grid-template-columns:1fr; } .hero-grid .hero-visual{ max-width:280px; margin:0 auto; order:-1; } } @media (min-width: 620px) and (max-width: 940px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } } .card{ background: var(--paper); border:1px solid var(--rule); border-radius: var(--radius); padding: 1.9rem; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); } .card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; } .card .card-icon{ width:44px; height:44px; border-radius:10px; background: var(--canvas); display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; font-size:1.3rem; } .card h3{ margin-bottom:0.5rem; } .card p{ font-size:0.94rem; margin-bottom:0.9rem; } .card-link{ font-weight:700; font-size:0.85rem; color: var(--accent); } .pillar-card{ background: var(--canvas); } .pillar-card.on-ink{ background: var(--ink); color: var(--slab-100); } .pillar-card.on-ink h3{ color: var(--paper); } .pillar-card.on-ink p{ color: #C9C0B3; } /* Tag / chip */ .chip{ display:inline-flex; align-items:center; font-family: var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; background: var(--slab-50); color: var(--slab-800); border-radius:999px; padding: 0.3em 0.8em; margin-bottom:0.8em; } .chip.rust{ background: #F6E7E0; color: var(--rust-pressed); } /* ---------------------------------- Sections ------------------------------ */ .section-head{ max-width: 640px; margin-bottom: var(--gap-lg); } .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } .bg-canvas{ background: var(--canvas); } .bg-ink{ background: var(--ink); color: #D8D0C3; } .bg-ink h2, .bg-ink h3{ color: var(--paper); } .bg-ink .eyebrow{ color:#A79B87; } /* Process steps */ .steps{ counter-reset: step; display:grid; gap:0; grid-template-columns: repeat(4,1fr); border-top:1px solid var(--rule); } .step{ counter-increment: step; padding: 1.6rem 1.4rem 1.6rem 0; border-right:1px solid var(--rule); position:relative; } .step:last-child{ border-right:none; } .step::before{ content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size:0.75rem; color: var(--accent); display:block; margin: 1rem 0 0.6rem; } @media (max-width: 940px){ .steps{ grid-template-columns:1fr; } .step{ border-right:none; border-bottom:1px solid var(--rule); } } /* Timeline (SDLC) */ .timeline{ display:flex; flex-direction:column; } .tl-item{ display:grid; grid-template-columns: 90px 1fr; gap:1.5rem; padding: 1.6rem 0; border-bottom:1px solid var(--rule); } .tl-item:first-child{ padding-top:0; } .tl-num{ font-family: var(--font-mono); font-size:0.8rem; color: var(--accent); padding-top:0.2rem; } @media (max-width:640px){ .tl-item{ grid-template-columns:1fr; gap:0.4rem; } } /* ---------------------------------- Pricing / Shop ------------------------ */ .price-card{ display:flex; flex-direction:column; } .price-card .price{ font-family: var(--font-serif); font-size:2.4rem; color:var(--ink); margin: 0.3rem 0; } .price-card .price span{ font-family: var(--font-sans); font-size:0.9rem; color:var(--muted); font-weight:600; } .price-card ul{ margin: 1.2rem 0; display:flex; flex-direction:column; gap:0.6rem; flex-grow:1; } .price-card li{ font-size:0.9rem; padding-left:1.4em; position:relative; } .price-card li::before{ content:"✓"; position:absolute; left:0; color: var(--accent); font-weight:700; } .price-card.featured{ border-color: var(--slab-800); box-shadow: var(--shadow-md); position:relative; } .price-card.featured .chip{ position:absolute; top:-13px; left:1.9rem; } .product-card{ display:flex; flex-direction:column; } .product-card .thumb{ aspect-ratio: 16/10; border-radius: var(--radius-sm); margin-bottom:1.1rem; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; } .product-card .thumb img{ height:56%; width:auto; filter: drop-shadow(0 8px 18px rgba(28,24,20,.18)); } .product-card .meta{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:1rem; } .product-card .meta .p{ font-family: var(--font-serif); font-size:1.3rem; color:var(--ink); } .store-toolbar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-bottom: var(--gap-md); border-bottom:1px solid var(--rule); padding-bottom:1.5rem; } .filter-pills{ display:flex; gap:0.5rem; flex-wrap:wrap; } .filter-pill{ padding:0.5em 1.1em; border-radius:999px; border:1px solid var(--rule); font-size:0.85rem; font-weight:600; } .filter-pill.active, .filter-pill:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); } .store-badges{ display:flex; gap:0.7rem; flex-wrap:wrap; margin-top:1rem; } .store-badge{ display:flex; align-items:center; gap:0.55rem; background: var(--ink); color: var(--paper); padding:0.55em 1.1em; border-radius:9px; font-size:0.8rem; } .store-badge small{ display:block; font-size:0.62rem; color:#B7AD9C; } .store-badge strong{ font-family: var(--font-serif); font-size:0.95rem; } /* Feature list w/ icon */ .feat-list{ display:grid; grid-template-columns: repeat(2,1fr); gap:1.2rem; } @media (max-width:640px){ .feat-list{ grid-template-columns:1fr; } } .feat{ display:flex; gap:0.9rem; align-items:flex-start; } .feat .dot{ width:34px; height:34px; flex:none; border-radius:9px; background:var(--canvas); display:flex; align-items:center; justify-content:center; } /* ---------------------------------- Forms ---------------------------------- */ .form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:1.1rem; } @media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } } .field{ display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1.1rem; } .field.full{ grid-column: 1/-1; } .field label{ font-size:0.82rem; font-weight:700; color: var(--ink); } .field label .req{ color: var(--rust); } .field input, .field textarea, .field select{ border:1.5px solid var(--rule); border-radius: var(--radius-sm); padding:0.85em 1em; background: var(--paper); color: var(--ink); transition: border-color .18s var(--ease); } .field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color: var(--slab-600); } .field .hint{ font-size:0.76rem; color: var(--muted); } .form-note{ font-size:0.82rem; color: var(--muted); margin-top:1rem; } .form-success{ display:none; background: var(--slab-50); border:1px solid var(--slab-200); border-radius: var(--radius-sm); padding:1.2rem 1.4rem; } .form-success.show{ display:block; } /* ---------------------------------- Footer --------------------------------- */ .site-footer{ background: var(--ink); color:#B7AD9C; padding: var(--gap-lg) 0 var(--gap-sm); } .footer-grid{ display:grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--gap-md); padding-bottom: var(--gap-lg); border-bottom:1px solid #322C24; } @media (max-width:940px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width:560px){ .footer-grid{ grid-template-columns: 1fr; } } .footer-grid h4{ color:var(--paper); font-family: var(--font-sans); font-weight:700; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:1rem; } .footer-grid li{ margin-bottom:0.65rem; font-size:0.9rem; } .footer-grid a:hover{ color: var(--slab-200); } .footer-brand img{ height:30px; margin-bottom:1rem; } .footer-brand p{ font-size:0.85rem; max-width:32ch; } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding-top: var(--gap-sm); font-size:0.78rem; } .social-row{ display:flex; gap:0.7rem; } .social-row a{ width:34px; height:34px; border-radius:50%; border:1px solid #3A342B; display:flex; align-items:center; justify-content:center; } .social-row a:hover{ border-color: var(--slab-400); color: var(--slab-200); } /* ---------------------------------- Utilities ------------------------------ */ .reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.in{ opacity:1; transform:none; } .divider{ height:1px; background:var(--rule); border:none; margin: var(--gap-lg) 0; } .text-muted{ color: var(--muted); } .mt-0{ margin-top:0; } .badge-mono{ font-family: var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em; color: var(--muted); } .breadcrumb{ display:flex; gap:0.5rem; align-items:center; font-size:0.82rem; color:var(--muted); margin-bottom:1.5rem; } .breadcrumb a:hover{ color: var(--slab-800); } .two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); align-items:start; } @media (max-width: 940px){ .two-col{ grid-template-columns:1fr; } } /* Skip link (a11y) */ .skip-link{ position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:0.8em 1.2em; z-index:200; } .skip-link:focus{ left:1rem; top:1rem; } /* Modal (mock checkout) */ .modal-overlay{ position:fixed; inset:0; background:rgba(28,24,20,0.55); z-index:300; display:none; align-items:center; justify-content:center; padding:1.5rem; } .modal-overlay.open{ display:flex; } .modal{ background:var(--paper); border-radius: var(--radius); max-width:480px; width:100%; padding:2rem; position:relative; max-height:88vh; overflow-y:auto; } .modal-close{ position:absolute; top:1rem; right:1rem; width:32px; height:32px; border-radius:50%; border:1px solid var(--rule); } .modal-close:hover{ background:var(--canvas); } .demo-tag{ background:var(--slab-50); border:1px dashed var(--slab-200); color:var(--slab-800); font-size:0.78rem; padding:0.6em 0.9em; border-radius:8px; margin-bottom:1.2rem; } /* Cart drawer */ .cart-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(420px,100%); background:var(--paper); z-index:301; transform:translateX(100%); transition: transform .3s var(--ease); display:flex; flex-direction:column; box-shadow:var(--shadow-lg); } .cart-drawer.open{ transform:translateX(0); } .cart-drawer .cart-head{ padding:1.5rem; border-bottom:1px solid var(--rule); display:flex; justify-content:space-between; align-items:center; } .cart-drawer .cart-body{ padding:1.2rem 1.5rem; overflow-y:auto; flex-grow:1; } .cart-drawer .cart-foot{ padding:1.5rem; border-top:1px solid var(--rule); } .cart-item{ display:flex; justify-content:space-between; gap:0.8rem; padding:0.9rem 0; border-bottom:1px solid var(--rule); } .cart-item .qty{ font-family:var(--font-mono); font-size:0.78rem; color:var(--muted); } .cart-empty{ text-align:center; color:var(--muted); padding: 3rem 1rem; } /* Accordion (FAQ) */ .acc-a{ display:none; } .acc-item.open .acc-a{ display:block; } .acc-q{ font-size:0.98rem; } .acc-item.open .acc-q span{ transform: rotate(45deg); } .acc-q span{ display:inline-block; transition: transform .18s var(--ease); color: var(--accent); font-size:1.2rem; line-height:1; } @media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }