:root{ /* Text tokens */ --ink: #0f141c; /* default text on light backgrounds */ --ink-muted: #5b6b82; /* muted text on light backgrounds */ --bg:#0b0d10; /* header bg */ --bg-2:#0f1115; /* dropdown bg */ --fg:#e8eef7; /* base text */ --muted:#9fb0c8; --accent:#35d0b6; /* brand accent (teal) */ --card:#131822; --ring:#2a3342; --radius:16px; --maxw:1180px; /* Choose one pair (uncomment the one you linked in ) */ --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --font-serif: "Merriweather", Georgia, "Times New Roman", serif; /* Or, if you picked Poppins + Playfair: */ /* --font-sans: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --font-serif: "Playfair Display", Georgia, "Times New Roman", serif; */ /* Weights */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-black: 900; /* Line-heights */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.6; /* Scale (adjust once for the whole site) */ --fs-900: clamp(2.2rem, 2.5vw + 1.2rem, 3.5rem); /* H1 */ --fs-800: clamp(1.8rem, 1.8vw + 1rem, 2.5rem); /* H2 */ --fs-700: clamp(1.4rem, 1.2vw + .9rem, 1.8rem); /* H3 */ --fs-600: 1.25rem; /* section titles */ --fs-500: 1.0625rem; /* body lg */ --fs-400: 1rem; /* body */ --fs-300: .9375rem; /* small */ --light-on-dark: #e9fbf7; /* same as your light page background */ } /* Base */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); font-weight: var(--w-regular); line-height: var(--lh-normal); color: var(--ink); /* <-- use dark ink by default */ } /* Headings use serif for brand feel */ h1, h2, h3, .h1, .h2, .h3{ font-family: var(--font-serif); letter-spacing: 0; color: currentColor; /* <-- inherit, don’t force light text */ margin: 0 0 .5em; opacity: 1; } h1, .h1 { font-size: var(--fs-900); line-height: var(--lh-tight); font-weight: var(--w-black); } h2, .h2 { font-size: var(--fs-800); line-height: var(--lh-tight); font-weight: var(--w-bold); } h3, .h3 { font-size: var(--fs-700); line-height: var(--lh-snug); font-weight: var(--w-semibold); } /* Body, lead, small */ p{ font-size: var(--fs-400); margin: 0 0 1rem; color: var(--ink); /* dark ink on light surfaces */ } .lead{ font-size: var(--fs-500); line-height: var(--lh-normal); font-weight: var(--w-medium); color: var(--ink); /* readable lead on light bg */ } .small, .hint { font-size: var(--fs-300); opacity:.9; } /* Nav + brand polish */ /* Brand size */ .brand { display: flex; /* put logo + text in a row */ align-items: center; /* vertical centering */ text-decoration: none; /* remove link underline */ font-size: 1.5rem; /* adjust text size */ font-weight: 600; /* bold enough for brand */ color: #00c3aa; /* your teal color */ } .brand-logo { height: 32px; /* match desired size */ width: auto; /* keep aspect ratio */ margin-right: 8px; /* space between logo and text */ display: inline-block; } .brand span { color: #ffffff !important; /* different color for "Craft" */ } /* Normalize nav link + dropdown button typography */ .nav>a, .drop-btn{ font-family: var(--font-sans); font-size: 1rem; /* 16px */ font-weight: var(--w-semibold); line-height: 1; padding:10px 14px; /* same padding so they look identical */ border:1px solid transparent; background:transparent; color: var(--fg); } .on-dark { color: var(--fg) !important; } /* force light text */ .on-light { color: var(--ink) !important; } /* force dark text */ .muted { color: var(--ink-muted); } /* light-section muted */ .nav>a:hover, .drop-btn:hover{ background:#12161e; border-color:#1b2330; } /* (Optional) make the hamburger button a touch larger */ .menu-toggle{ padding:8px 10px; transform:scale(1.05); } /* Hero headline tweak (if you use .hero h1) */ .hero h1 { letter-spacing: -0.5px; } /* RESET */ *{box-sizing:border-box} html,body{margin:0;padding:0} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* LAYOUT */ .container{max-width:var(--maxw);margin:0 auto;padding:0 20px} .stack{display:flex;gap:28px;align-items:center} .grid{display:grid;gap:20px} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:900px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}} /* NAV */ .site-header{position:sticky;top:0;z-index:50;background:var(--bg);color:var(--fg);border-bottom:1px solid #111} .navbar{height:64px} .brand{font-weight:700;letter-spacing:.2px} .brand span{color:var(--accent)} .nav{margin-left:auto;display:flex;gap:8px} .nav>a,.nav .menu-toggle, .nav .drop-btn{ padding:10px 14px;border-radius:999px;border:1px solid transparent; font-weight:600;color:var(--fg);background:transparent;cursor:pointer } .menu{position:relative} .menu-panel{ position:absolute;left:0;top:110%;min-width:520px;padding:14px;background:var(--bg-2); border:1px solid #1b2330;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35); display:none; } .menu:hover .menu-panel, .menu:focus-within .menu-panel{display:block} .menu-list{display:grid;grid-template-columns:1fr 1fr;gap:10px} .menu-item{padding:12px;border-radius:12px;border:1px solid transparent;transition:all .15s} .menu-item:hover{border-color:#243049;background:#141a24} .menu-item small{color:var(--muted);display:block;margin-top:4px} /* MOBILE NAV */ @media(max-width:900px){ .nav{display:none} .nav.open{display:flex;flex-direction:column;gap:10px;position:absolute;left:0;right:0;top:64px;background:var(--bg);padding:16px;border-bottom:1px solid #111} .menu-panel{position:static;min-width:auto;display:block;padding:10px;background:transparent;border:none;box-shadow:none} } /* HERO */ .hero{background:linear-gradient(90deg,#e9fbf7, #d9f1ff);color:#0c1520} .hero-inner{display:grid;grid-template-columns:1.25fr .75fr;gap:26px;align-items:center;padding:48px 0} .hero h1{font-size:56px;line-height:1.05;margin:0 0 10px} .hero p{color:#35506a;font-size:18px;margin:0 0 20px} .tagline{ position:relative;overflow:hidden;border-radius:20px; background:#0c1520;color:#e9eef7;padding:18px } .tagline img{filter:saturate(1.1) contrast(1.05);opacity:.85;border-radius:12px} .tagline .over{ position:absolute;left:16px;bottom:16px;font-weight:900;font-size:52px; line-height:.95;letter-spacing:.5px } /* CARDS */ .card{background:var(--card);border:1px solid var(--ring);border-radius:var(--radius);padding:18px;color:var(--fg)} .card h3{margin:0 0 6px} .card p{color:var(--muted);margin:0} /* FOOTER */ .site-footer{background:#0b0d10;color:#94a6c4;margin-top:56px;border-top:1px solid #111} .site-footer .container{padding:26px 20px} .form-card{background:var(--card);border:1px solid var(--ring);border-radius:20px;padding:24px;color:var(--fg);max-width:820px} .form-title{margin:0 0 16px;font-size:30px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-grid .full{grid-column:1 / -1} .field label{display:block;font-weight:600;margin:0 0 6px} .field input,.field select,.field textarea{ width:100%;padding:12px 14px;border-radius:12px;border:1px solid #2a3342; background:#0f141c;color:#e8eef7;outline:none } .field input:focus,.field select:focus,.field textarea:focus{border-color:#3a4b64;box-shadow:0 0 0 3px rgba(53,208,182,.15)} .hint{color:var(--muted);font-size:12px;margin-top:6px} .btn-primary{padding:12px 18px;border-radius:12px;border:1px solid #1b2330;background:#12161e;color:#e8eef7;font-weight:700;cursor:pointer} .btn-primary:disabled{opacity:.6;cursor:not-allowed} .req{color:#35d0b6;margin-left:2px} @media(max-width:900px){.form-grid{grid-template-columns:1fr}} .unlock-box { width: 100%; max-width: 500px; height: 300px; background-image: url("images/unlock-simplicity.jpg"); background-size: cover; background-position: center; border-radius: 16px; position: relative; overflow: hidden; } .overlay-text { position: absolute; bottom: 24px; left: 24px; font-size: 2rem; font-weight: 700; color: white; text-shadow: 1px 1px 4px rgba(0,0,0,0.4); } /* === Landing page fixes === */ /* 1) Four boxes align in one row on desktop, 2x2 on tablet */ .solutions-grid{ display:grid; gap:20px; grid-template-columns:repeat(2,minmax(0,1fr)); } @media (min-width: 1024px){ .solutions-grid{ grid-template-columns:repeat(4,1fr); } } /* equal heights */ .solutions-grid .card{ height:100%; display:flex; flex-direction:column; } /* 2 & 3) Tagline image + "UNLOCK SIMPLICITY" overlay stays inside box */ .tagline{ position:relative; overflow:hidden; border-radius:20px; background:#0c1520; /* fallback */ aspect-ratio: 16/10; /* control the box */ } .tagline img{ opacity:1 !important; transform:none !important; filter:saturate(1.1) contrast(1.05); /* keep your look */ transition:none !important; animation:none !important; width:100%; height:100%; object-fit:cover; display:block; border-radius:12px; } /* subtle darken overlay so text pops */ .tagline::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.45)); } .tagline .over{ position:absolute; z-index:2; left:16px; bottom:16px; color:#fff; font-weight:900; font-size:52px; line-height:.95; letter-spacing:.5px; text-shadow:0 12px 30px rgba(0,0,0,.35); } .tagline .over--slogan{ right:16px; bottom:16px; left:auto; text-align:right; font-size: clamp(22px, 3.1vw, 38px); line-height: 1.02; letter-spacing:.5px; max-width: 70%; } @media (max-width: 980px){ .tagline{ max-width:none; } .tagline .over{ font-size:38px; left:12px; bottom:12px; } .tagline .over--slogan{ right:12px; bottom:12px; font-size: clamp(20px, 6vw, 32px); } } /* 4) H1 visible (was blending/hidden under header) */ .hero{ padding-top: 16px; } /* avoid sticky-header overlap */ .hero h1{ color:#0c1520 !important; } /* ensure dark on light bg */ .hero p{ color:#35506a; } /* readable lead on gradient */ /* .hero-inner{ display:grid; gap:26px; align-items:center; padding:48px 0; grid-template-columns: 1.25fr .85fr; } @media (max-width: 980px){ .hero-inner{ grid-template-columns:1fr; } } */ /* Make hero columns align at the top, not vertically centered */ .hero-inner{ display:flex; align-items:flex-start; /* <-- key change */ justify-content:space-between; gap:32px; flex-wrap:wrap; /* keeps it responsive */ } /* sensible sizing so the tile doesn’t stretch oddly */ .hero-inner > div{ flex:1 1 420px; } .hero-inner .tagline{ flex:0 1 560px; margin-top:0; } @media (max-width:900px){ .hero-inner{ flex-direction:column; } .hero-inner .tagline{ width:100%; } } /* Buttons */ .btn{ display:inline-block; padding:.75rem 1.1rem; border:1px solid #1b2330; border-radius:12px; background:#12161e; color:#e8eef7; font-weight:700; text-decoration:none; } .btn:hover{ filter:brightness(1.1); } /* Make secondary a solid accent rather than transparent */ .btn.secondary{ background: var(--accent, #35d0b6); border-color: var(--accent, #35d0b6); color:#081b29; /* dark text for contrast */ } .btn.secondary:hover{ filter:brightness(1.05); } /* === Hero slideshow === */ .hero-carousel { position: relative; } .hero-carousel .slide { display: none; text-decoration: none; color: inherit; animation: fadeIn .45s ease; } .hero-carousel .slide.is-active { display: block; } .hero-carousel h1 { color:#0c1520; margin:0 0 .5rem; } .hero-carousel .lead { color:#35506a; } .slides-nav { display:flex; gap:8px; margin-top:10px; } .slides-nav .dot { width:10px; height:10px; border-radius:50%; background:#9fb0c8; border:none; cursor:pointer; } .slides-nav .dot.is-active { background:var(--accent, #35d0b6); } @keyframes fadeIn { from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} } .tagline .over { position: absolute; z-index: 2; right: 24px; bottom: 24px; text-align: right; color: #ffffff; font-weight: 800; font-size: clamp(32px, 4vw, 52px); font-family: 'Segoe UI', 'Montserrat', sans-serif; text-transform: uppercase; line-height: 1.1; letter-spacing: 1px; background: rgba(0, 0, 0, 0.15); /* or try 0.2 if too light */ padding: 12px 20px; border-radius: 8px; text-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } .unlock { color: #00e0ff; } .simplicity { color: #ffffff; } .tile1 .unlock { color: #FF9800; text-shadow: 0 2px 6px rgba(0,0,0,0.7);} .tile2 .unlock { color: #ffd600; } .tile3 .unlock { color: #1BC5BD; } .tile4 .unlock { color: #22C55E; } .tile5 .unlock { color: #7c4dff; } /* etc. */ /* Sticky footer layout */ html, body{ height:100%; } body{ display:flex; min-height:100vh; flex-direction:column; } main{ flex:1 0 auto; } /* pushes footer down when content is short */ .site-footer{ margin-top:0; } /* remove any extra margin */ /* Optional: reduce excess bottom padding on the final section */ main > section:last-of-type{ padding-bottom:24px; } /* Make text inside dark surfaces match the site's light background color */ .card, .card h1, .card h2, .card h3, .card p, .card small, .card li, .form-card, .form-card h1, .form-card h2, .form-card h3, .form-card p, .form-card small, .site-footer, .site-footer a, .menu-panel, .menu-panel .menu-item strong, .menu-panel .menu-item small, .tagline .over { color: var(--light-on-dark) !important; } /* One-row features grid that wraps responsively */ .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 16px; } /* shrink section spacing so gaps feel tighter */ .section-tight { padding: 12px 0; } .section-tight h2 { margin: 0 0 10px; } /* responsive fallbacks */ @media (max-width: 1200px) { .grid-4 { grid-template-columns: repeat(2, minmax(260px, 1fr)); } } @media (max-width: 640px) { .grid-4 { grid-template-columns: 1fr; } } /* keep the hero columns top-aligned (prevents tile “droop”) */ .hero-inner { display:flex; align-items:flex-start; gap:32px; flex-wrap:wrap; } .hero-inner > div { flex:1 1 420px; } .hero-inner .tagline { flex:0 1 560px; margin-top:0; } #demo video { max-width: 860px; /* or 720px */ margin: 0 auto; display: block; } #demo h2 { text-align: center; margin: 40px 0 16px; /* top, sides, bottom */ } .video-wrapper { position: relative; max-width: 720px; /* YouTube-ish width */ margin: 0 auto; /* center it */ aspect-ratio: 16/9; /* keep proportions */ } .video-wrapper video { width: 100%; height: 100%; border-radius: 12px; border: 1px solid #2a3342; background: #000; } /* keep natural aspect ratio; scale to container width */ .tiles img, .tile .thumb{ display:block; width:100%; height:auto; }