/* TIMEWALK TRAVEL — Homepage Styles Extracted from the provided homepage.html so you can link it as an external CSS file. Usage: 1) Save this file as styles.css 2) In your HTML , add: 3) Remove the block from the HTML. */ :root{ /* Theme: modern game UI (no use of the name "Kanko Hofu") */ --bg: #070A12; --panel: rgba(255,255,255,0.06); --panel2: rgba(255,255,255,0.09); --stroke: rgba(255,255,255,0.14); --text: rgba(255,255,255,0.92); --muted: rgba(255,255,255,0.68); --muted2: rgba(255,255,255,0.56); --accent: #7C3AED; /* violet */ --accent2: #22D3EE; /* cyan */ --accent3: #F59E0B; /* amber */ --good: #34D399; /* green */ --shadow: 0 18px 60px rgba(0,0,0,0.55); --radius: 18px; --radius2: 24px; --max: 1160px; --pad: 20px; } *{ box-sizing: border-box; } html,body{ height:100%; } body{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: radial-gradient(1200px 700px at 15% 10%, rgba(124,58,237,0.25), transparent 60%), radial-gradient(900px 600px at 85% 20%, rgba(34,211,238,0.18), transparent 60%), radial-gradient(900px 700px at 45% 100%, rgba(245,158,11,0.10), transparent 60%), linear-gradient(180deg, #060814, #050711 55%, #04060F); overflow-x:hidden; } a{ color: inherit; text-decoration: none; } .wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); } /* Subtle animated grid (pure CSS) */ .gridfx{ position: fixed; inset: 0; pointer-events:none; opacity: 0.18; mix-blend-mode: screen; background-image: linear-gradient(to right, rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 54px 54px; transform: perspective(900px) rotateX(62deg) translateY(-22%); transform-origin: top; filter: blur(0.2px); } @media (prefers-reduced-motion: no-preference){ .gridfx{ animation: drift 18s linear infinite; } @keyframes drift{ from{ background-position: 0 0, 0 0; } to{ background-position: 0 540px, 540px 0; } } } /* Header */ header{ position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); background: rgba(6,8,20,0.62); border-bottom: 1px solid rgba(255,255,255,0.10); } .nav{ display:flex; align-items:center; justify-content: space-between; padding: 14px 0; gap: 16px; } .brand{ display:flex; align-items:center; gap: 12px; min-width: 220px; } .mark{ width: 36px; height: 36px; border-radius: 12px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), transparent 55%), linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 10px 28px rgba(124,58,237,0.25); border: 1px solid rgba(255,255,255,0.18); position: relative; } .mark:after{ content:""; position:absolute; inset: 9px; border-radius: 10px; border: 1px dashed rgba(255,255,255,0.35); } .brand strong{ letter-spacing: 0.08em; font-size: 12px; text-transform: uppercase; } .brand span{ display:block; color: var(--muted2); font-size: 12px; margin-top: 2px; } nav ul{ list-style:none; padding:0; margin:0; display:flex; gap: 16px; flex-wrap: wrap; } nav a{ color: var(--muted); font-size: 13px; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; } nav a:hover{ color: var(--text); border-color: rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); } .navRight{ display:flex; align-items:center; gap: 10px; } .pill{ display:inline-flex; align-items:center; gap: 8px; padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: var(--muted); font-size: 12px; white-space: nowrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: var(--text); font-weight: 600; font-size: 13px; cursor: pointer; transition: transform .12s ease, background .12s ease, border-color .12s ease; user-select:none; } .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); } .btnPrimary{ background: linear-gradient(135deg, rgba(124,58,237,0.95), rgba(34,211,238,0.75)); border-color: rgba(255,255,255,0.18); box-shadow: 0 18px 50px rgba(124,58,237,0.22); } .btnPrimary:hover{ background: linear-gradient(135deg, rgba(124,58,237,1), rgba(34,211,238,0.85)); } /* Hero */ .hero{ padding: 56px 0 26px; position: relative; } .heroGrid{ display:grid; grid-template-columns: 1.25fr 0.75fr; gap: 26px; align-items: start; } @media (max-width: 980px){ .heroGrid{ grid-template-columns: 1fr; } .brand{ min-width: unset; } nav ul{ display:none; } } .eyebrow{ display:inline-flex; align-items:center; gap: 10px; padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: var(--muted); font-size: 12px; } .dot{ width: 8px; height: 8px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, #fff, var(--accent2)); box-shadow: 0 0 0 4px rgba(34,211,238,0.14); } h1{ margin: 14px 0 10px; font-size: clamp(34px, 4.3vw, 56px); line-height: 1.02; letter-spacing: -0.02em; } .lead{ color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 62ch; } .ctaRow{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; } .proof{ margin-top: 22px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 720px){ .proof{ grid-template-columns: 1fr; } } .proofCard{ padding: 14px 14px; border-radius: var(--radius); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 12px 30px rgba(0,0,0,0.25); } .proofCard strong{ display:block; font-size: 13px; } .proofCard span{ display:block; color: var(--muted2); font-size: 12px; margin-top: 3px; } /* Right hero panel */ .panel{ border-radius: var(--radius2); background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04)); border: 1px solid rgba(255,255,255,0.14); box-shadow: var(--shadow); overflow:hidden; } .panelHead{ padding: 16px 16px 10px; display:flex; align-items:center; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.10); } .panelHead .title{ font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; } .badge{ font-size: 12px; color: rgba(255,255,255,0.80); border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); padding: 6px 10px; border-radius: 999px; white-space: nowrap; } .questLog{ padding: 14px 16px 16px; } .questLine{ display:flex; gap: 10px; padding: 10px 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.18); margin-bottom: 10px; } .qIcon{ width: 36px; height: 36px; border-radius: 14px; background: linear-gradient(135deg, rgba(34,211,238,0.35), rgba(124,58,237,0.35)); border: 1px solid rgba(255,255,255,0.14); flex: 0 0 auto; position: relative; } .qIcon:before{ content:""; position:absolute; inset: 10px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.35); } .questLine strong{ display:block; font-size: 13px; } .questLine span{ display:block; font-size: 12px; color: var(--muted2); margin-top: 2px; } .qMeta{ display:flex; gap: 8px; flex-wrap: wrap; margin-top: 7px; } .chip{ font-size: 11px; padding: 5px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.04); } .chip.good{ border-color: rgba(52,211,153,0.35); background: rgba(52,211,153,0.10); } .chip.warn{ border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.10); } /* Sections */ section{ padding: 28px 0; } .sectionHead{ display:flex; align-items:flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; } h2{ margin:0; font-size: 18px; letter-spacing: -0.01em; } .sub{ margin: 0; color: var(--muted); font-size: 13px; max-width: 70ch; } .cards{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 980px){ .cards{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .cards{ grid-template-columns: 1fr; } } .card{ padding: 14px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); box-shadow: 0 16px 44px rgba(0,0,0,0.30); position: relative; overflow:hidden; } .card:before{ content:""; position:absolute; inset:-80px -120px auto auto; width: 240px; height: 240px; background: radial-gradient(circle at 30% 30%, rgba(124,58,237,0.25), transparent 60%); transform: rotate(10deg); } .kicker{ color: rgba(255,255,255,0.74); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } .card h3{ margin: 8px 0 6px; font-size: 15px; letter-spacing: -0.01em; } .card p{ margin:0; color: var(--muted2); font-size: 12.5px; line-height: 1.5; } .card .btn{ margin-top: 12px; width: 100%; } .grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 880px){ .grid2{ grid-template-columns: 1fr; } } .questCard .top{ display:flex; align-items:flex-start; justify-content: space-between; gap: 10px; } .questCard h3{ margin: 0; font-size: 15px; } .questCard p{ margin-top: 8px; } .questCard .meta{ display:flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .questCard .actions{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .builder{ padding: 16px; border-radius: var(--radius2); border: 1px solid rgba(255,255,255,0.14); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04)); box-shadow: var(--shadow); } .builderGrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; } @media (max-width: 860px){ .builderGrid{ grid-template-columns: 1fr; } } .control{ padding: 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.14); } .control label{ display:block; font-size: 12px; color: rgba(255,255,255,0.78); margin-bottom: 8px; } .chips{ display:flex; gap: 8px; flex-wrap: wrap; } .footer{ padding: 30px 0 46px; border-top: 1px solid rgba(255,255,255,0.10); margin-top: 14px; } .footerGrid{ display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 12px; } @media (max-width: 980px){ .footerGrid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .footerGrid{ grid-template-columns: 1fr; } } .footer h4{ margin:0 0 10px; font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.85); } .footer a{ color: var(--muted); font-size: 13px; display:block; padding: 6px 0; } .footer a:hover{ color: var(--text); } .newsletter{ padding: 14px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); } .newsletter p{ margin: 8px 0 10px; color: var(--muted); font-size: 13px; line-height: 1.55; } .field{ display:flex; gap: 10px; flex-wrap: wrap; } input[type=email]{ flex: 1 1 220px; background: rgba(0,0,0,0.20); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 11px 12px; color: var(--text); outline: none; } input::placeholder{ color: rgba(255,255,255,0.40); } .tiny{ color: rgba(255,255,255,0.46); font-size: 12px; margin-top: 10px; line-height: 1.5; } /* Accessibility helpers */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }