/* =========================================================== AltoranWorks — homepage styles Shared by /index.html (EN) and /ko/index.html (KO) =========================================================== */ :root { --cream: #f6f2ea; /* warm off-white base */ --paper: #fffdf8; /* cards / surfaces */ --navy: #1c2a44; /* deep navy text */ --navy-2: #56607a; /* secondary text */ --navy-3: #8a92a6; /* tertiary / muted */ --coral: #cf6a52; /* muted coral accent */ --coral-soft: #e7ad9d; --line: rgba(28,42,68,.14); /* borders */ --line-soft: rgba(28,42,68,.08); /* inner borders */ --grid: rgba(28,42,68,.045); /* spreadsheet grid */ --radius: 12px; --maxw: 1080px; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } * { box-sizing: border-box; } html, body { margin: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--navy); background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 34px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 34px 100%, var(--cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Korean page opts in via */ html[lang="ko"] body { font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; word-break: keep-all; } a { color: inherit; white-space: nowrap; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } /* ---------- AW mark ---------- */ .mark { width: 30px; height: 30px; flex: none; border: 1.5px solid var(--navy); border-radius: 6px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; overflow: hidden; } .mark i { display: block; } .mark i:nth-child(1) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .mark i:nth-child(2) { border-bottom: 1px solid var(--line); background: var(--coral); } .mark i:nth-child(3) { border-right: 1px solid var(--line); } .mark--sm { width: 24px; height: 24px; border-width: 1.4px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 20; background: rgba(246,242,234,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); } .header-inner { max-width: var(--maxw); margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; } .brand-name { font-size: 16px; font-weight: 650; letter-spacing: -.01em; } .nav { display: flex; align-items: center; gap: 8px; font-size: 14px; } .nav-link { text-decoration: none; color: var(--navy-2); padding: 7px 12px; border-radius: 6px; } .nav-link:hover { color: var(--navy); background: rgba(28,42,68,.05); } .nav-link--btn { color: var(--navy); padding: 7px 13px; font-weight: 550; border: 1px solid var(--line); border-radius: 6px; } .nav-link--btn:hover { border-color: var(--navy); background: transparent; } /* ---------- Hero ---------- */ .hero { display: flex; flex-wrap: wrap; gap: 44px; align-items: center; padding: 64px 0 56px; } .hero-text { flex: 1.25 1 340px; min-width: 300px; } .hero-aside { flex: 1 1 300px; min-width: 280px; } .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy-3); margin-bottom: 18px; } h1.h1 { margin: 0; font-size: clamp(38px, 6vw, 58px); line-height: 1.02; letter-spacing: -.025em; font-weight: 700; } .lead { margin: 18px 0 0; font-size: clamp(17px, 2.1vw, 21px); line-height: 1.45; color: var(--navy); max-width: 34ch; } .support { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--navy-2); max-width: 46ch; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } /* ---------- Buttons ---------- */ .btn { text-decoration: none; font-size: 14.5px; font-weight: 600; padding: 12px 20px; border-radius: 7px; white-space: nowrap; display: inline-block; transition: background .15s, border-color .15s, color .15s; } .btn--primary { background: var(--navy); color: var(--paper); } .btn--primary:hover { background: #243556; } .btn--ghost { color: var(--navy); border: 1px solid var(--line); } .btn--ghost:hover { border-color: var(--navy); } /* ---------- Hero preview panel ---------- */ .preview { background: var(--paper); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; box-shadow: 0 1px 2px rgba(28,42,68,.05), 0 14px 30px -18px rgba(28,42,68,.28); } .preview-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); } .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); } .dot--coral { background: var(--coral-soft); } .preview-file { margin-left: 6px; font-family: var(--mono); font-size: 11px; color: var(--navy-3); } /* spreadsheet rows inside hero */ .xls { font-family: var(--mono); font-size: 11.5px; color: var(--navy-2); } .xls-row { display: grid; grid-template-columns: 34px 1fr 64px 64px; border-bottom: 1px solid var(--line-soft); } .xls-row:last-child { border-bottom: 0; } .xls-row--head { background: rgba(28,42,68,.035); } .xls-cell { padding: 7px 8px; border-right: 1px solid var(--line-soft); } .xls-cell:last-child { border-right: 0; } .xls-rownum { color: var(--navy-3); background: rgba(28,42,68,.025); } .xls-head { color: var(--navy-3); } .xls-num { text-align: right; } .xls-hl { background: var(--coral); color: var(--paper); } /* decision panel inside KO hero */ .decide { padding: 16px; display: flex; flex-direction: column; gap: 10px; } .decide-cap { font-size: 12.5px; color: var(--navy-3); } .choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; font-size: 13px; font-weight: 500; } .choice { border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; color: var(--navy-2); } .choice--on { border: 1.5px solid var(--coral); border-radius: 8px; padding: 11px 12px; background: rgba(207,106,82,.08); color: var(--navy); display: flex; align-items: center; justify-content: space-between; } .choice--on b { color: var(--coral); font-weight: 700; } .decide-foot { border-top: 1px solid var(--line-soft); padding-top: 11px; display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--navy-2); } .decide-foot .num { font-family: var(--mono); color: var(--coral); } /* ---------- Section heading ---------- */ .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 28px; } .section-head h2 { margin: 0; font-size: 24px; letter-spacing: -.01em; font-weight: 650; } .section-count { font-family: var(--mono); font-size: 12px; color: var(--navy-3); } /* ---------- Product grid + cards ---------- */ .products { padding: 8px 0; scroll-margin-top: 80px; } .grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .18s, transform .18s, border-color .18s; } .card--link:hover { border-color: rgba(28,42,68,.24); box-shadow: 0 1px 2px rgba(28,42,68,.05), 0 16px 32px -22px rgba(28,42,68,.4); transform: translateY(-2px); } .card--soon { opacity: .92; } .card-visual { height: 148px; padding: 16px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: center; background: linear-gradient(rgba(28,42,68,.04) 1px, transparent 1px) 0 0 / 100% 24px, linear-gradient(90deg, rgba(28,42,68,.04) 1px, transparent 1px) 0 0 / 24px 100%, var(--paper); } .card-body { padding: 18px; display: flex; flex-direction: column; flex: 1; } .card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .label { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-3); } .status { font-family: var(--mono); font-size: 11px; } .status--available { display: inline-flex; align-items: center; gap: 6px; color: var(--navy-2); } .status--available::before { content: ""; width: 7px; height: 7px; background: var(--coral); } .status--beta { color: var(--navy-2); border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; } .status--muted { color: var(--navy-3); } .card-title { margin: 0 0 8px; font-size: 17.5px; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; } .card-desc { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--navy-2); } .card-cta { margin-top: auto; align-self: flex-start; text-decoration: none; font-size: 13.5px; font-weight: 600; padding: 10px 16px; border-radius: 7px; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; } .card-cta--solid { background: var(--navy); color: var(--paper); } .card-cta--solid:hover { background: #243556; } .card-cta--outline { color: var(--navy); border: 1px solid var(--navy); } .card-cta--outline:hover { background: var(--navy); color: var(--paper); } .card-cta--disabled { color: var(--navy-3); border: 1px dashed var(--line); cursor: default; } /* ---------- Card visual motifs ---------- */ .sheet { width: 100%; max-width: 240px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; font-family: var(--mono); font-size: 10.5px; background: var(--paper); } .sheet-row { display: grid; grid-template-columns: 1fr 46px 46px; border-bottom: 1px solid var(--line-soft); } .sheet-row:last-child { border-bottom: 0; } .sheet-row--head { background: rgba(28,42,68,.04); color: var(--navy-3); } .sheet-cell { padding: 5px 7px; border-right: 1px solid var(--line-soft); } .sheet-cell:last-child { border-right: 0; } .sheet-num { text-align: right; } .sheet-hl { background: var(--coral); color: var(--paper); } .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 230px; font-size: 11.5px; font-weight: 550; } .choices .choice, .choices .choice--on { border-radius: 7px; padding: 9px 10px; } .stack { position: relative; width: 150px; height: 96px; } .stack i { position: absolute; border: 1px solid var(--line); border-radius: 6px; } .stack i:nth-child(1) { inset: 14px 0 0 22px; background: rgba(28,42,68,.03); } .stack i:nth-child(2) { inset: 7px 11px; background: rgba(255,253,248,.9); } .stack i:nth-child(3) { inset: 0 22px 14px 0; background: var(--paper); display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; overflow: hidden; } .stack i:nth-child(3) span { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .stack i:nth-child(3) span:nth-child(2) { background: rgba(28,42,68,.04); } .stack i:nth-child(3) span:nth-child(3), .stack i:nth-child(3) span:nth-child(6) { border-right: 0; } .stack i:nth-child(3) span:nth-child(n+4) { border-bottom: 0; } .swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; width: 100%; max-width: 200px; } .swatches span { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 5px; background: rgba(28,42,68,.06); } .swatches span.s-navy { background: var(--navy); } .swatches span.s-coral { background: var(--coral); } .swatches span.s-coral-soft { background: var(--coral-soft); } .swatches span.s-paper { background: var(--paper); } .doc { width: 100%; max-width: 200px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); padding: 14px 13px; display: flex; flex-direction: column; gap: 8px; } .doc i { height: 6px; border-radius: 3px; background: rgba(28,42,68,.12); display: block; } .doc i.l-title { height: 7px; width: 55%; background: var(--navy); } .doc i.l-coral { width: 40%; background: var(--coral-soft); } /* ---------- About ---------- */ .about { padding: 72px 0 64px; scroll-margin-top: 80px; } .about-grid { display: flex; flex-wrap: wrap; gap: 44px; align-items: flex-start; } .about-grid > div { flex: 1 1 320px; min-width: 280px; } .about h2 { margin: 0; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.12; letter-spacing: -.02em; font-weight: 700; max-width: 18ch; } .about p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--navy-2); max-width: 52ch; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--line); background: var(--paper); } .footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 28px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; } .footer-brand { display: flex; align-items: center; gap: 10px; } .footer-brand .brand-name { font-size: 14px; font-weight: 600; } .footer-year { font-size: 13px; color: var(--navy-3); margin-left: 4px; } .footer-nav { display: flex; flex-wrap: wrap; gap: 4px; font-size: 13.5px; } .footer-nav a { text-decoration: none; color: var(--navy-2); padding: 6px 10px; } .footer-nav a:hover { color: var(--navy); } /* ---------- Korean type tweaks ---------- */ html[lang="ko"] .card-title { font-weight: 600; line-height: 1.3; } html[lang="ko"] .card-desc { line-height: 1.65; } html[lang="ko"] .section-head h2 { font-weight: 600; } html[lang="ko"] .lead { line-height: 1.5; max-width: 30ch; } html[lang="ko"] .support { line-height: 1.7; max-width: 42ch; } html[lang="ko"] .about p { line-height: 1.8; max-width: 42ch; } /* ---------- Legal pages ---------- */ .legal { max-width: 820px; padding-top: 72px; padding-bottom: 84px; } .legal h1 { margin: 0 0 20px; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; letter-spacing: -.02em; } .legal p { color: var(--navy-2); font-size: 16px; line-height: 1.7; max-width: 68ch; } /* ---------- Small screens ---------- */ @media (max-width: 640px) { .wrap, .header-inner, .footer-inner { padding-left: 20px; padding-right: 20px; } .hero { padding: 40px 0 36px; gap: 32px; } .hero-text, .hero-aside, .about-grid > div { flex-basis: 100%; min-width: 0; } .preview, .card { max-width: 100%; min-width: 0; } .about { padding: 48px 0 40px; } .grid { grid-template-columns: minmax(0, 1fr); } .nav { font-size: 13.5px; } .btn { padding: 11px 18px; } }