/* CCDing 希希丁品牌顧問 — Landing Page redesign Three art-director-flavored themes, switched via [data-theme] on . ----------------------------------------------------------------------- */ :root { /* defaults overridden per-theme */ --bg: #F2EFE8; --paper: #ECE7DC; --ink: #1A1816; --ink-soft: #6E665A; --line: #1A1816; --line-soft: rgba(26,24,22,0.16); --accent: #B23A1B; --accent-2: #2B4A3D; --hover-bg: rgba(26,24,22,0.05); --font-display: "Instrument Serif", "Noto Serif TC", serif; --font-serif: "Noto Serif TC", "Instrument Serif", serif; --font-sans: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --col-gap: 24px; --pad-x: clamp(28px, 5vw, 96px); } /* ============================== THEMES ============================== */ [data-theme="editorial"] { --bg: #F4F2EC; --paper: #E9E6DC; --ink: #1F1F1F; --ink-soft: #6E6E6E; --line: #1F1F1F; --line-soft: rgba(31,31,31,0.14); --accent: #E89923; /* brand orange */ --accent-2: #5DBFB5; /* brand teal */ --hover-bg: rgba(31,31,31,0.05); --font-display: "Instrument Serif", "Noto Serif TC", serif; --font-serif: "Noto Serif TC", "Instrument Serif", serif; --font-sans: "Noto Sans TC", -apple-system, sans-serif; } [data-theme="brutalist"] { --bg: #0E0E0D; --paper: #1A1A18; --ink: #F2F0E8; --ink-soft: #8A8B85; --line: #F2F0E8; --line-soft: rgba(242,240,232,0.18); --accent: #5DBFB5; /* teal pops on black */ --accent-2: #E89923; /* brand orange */ --hover-bg: rgba(242,240,232,0.06); --font-display: "Space Grotesk", "Noto Sans TC", sans-serif; --font-serif: "Noto Sans TC", "Space Grotesk", sans-serif; --font-sans: "Noto Sans TC", -apple-system, sans-serif; } [data-theme="ccding"] { --bg: #FAFAF7; --paper: #F0EFE9; --ink: #1F1F1F; --ink-soft: #7A7B7D; --line: #1F1F1F; --line-soft: rgba(31,31,31,0.14); --accent: #E89923; /* CCD brand orange */ --accent-2: #5DBFB5; /* CCD brand teal */ --hover-bg: rgba(31,31,31,0.05); --font-display: "DM Serif Display", "Noto Serif TC", serif; --font-serif: "Noto Serif TC", "DM Serif Display", serif; --font-sans: "Noto Sans TC", -apple-system, sans-serif; } /* ============================== RESET ============================== */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color 0.4s ease, color 0.4s ease; } body { overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } img, svg { display: block; max-width: 100%; } ul { list-style: none; } ::selection { background: var(--accent); color: var(--bg); } /* ============================== UTILITIES ============================== */ .container { width: 100%; padding-left: var(--pad-x); padding-right: var(--pad-x); } .row { display: flex; } .col { display: flex; flex-direction: column; } .grid { display: grid; gap: var(--col-gap); } .mono { font-family: var(--font-mono); font-feature-settings: "tnum"; letter-spacing: 0.02em; } .serif { font-family: var(--font-serif); } .display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; } .upper { text-transform: uppercase; letter-spacing: 0.14em; } .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); } .hairline { height: 1px; background: var(--line); opacity: 0.85; width: 100%; } .hairline.soft { background: var(--line-soft); opacity: 1; } .section { padding-top: clamp(72px, 8vw, 140px); padding-bottom: clamp(72px, 8vw, 140px); position: relative; } .section-head { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: end; margin-bottom: 56px; } .section-head .label { display: flex; gap: 14px; align-items: baseline; } .section-head .num { font-family: var(--font-mono); font-size: 12px; opacity: 0.7; } .section-head h2 { font-family: var(--font-display); font-size: clamp(40px, 5.4vw, 86px); line-height: 0.96; font-weight: 400; letter-spacing: -0.02em; } .section-head .lede { font-family: var(--font-serif); font-size: clamp(15px, 1.1vw, 18px); line-height: 1.65; color: var(--ink-soft); max-width: 52ch; } /* ============================== NAV ============================== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--pad-x); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.3s ease, background-color 0.3s ease; } .nav.is-scrolled { border-bottom-color: var(--line-soft); } .nav .brand { display: flex; align-items: center; gap: 14px; } .nav .brand img.logo { height: 64px; width: auto; display: block; } @media (max-width: 780px) { .nav .brand img.logo { height: 52px; } } [data-theme="brutalist"] .nav .brand img.logo { filter: invert(1) hue-rotate(180deg); } .nav .brand .mark { font-family: var(--font-display); font-size: 26px; line-height: 1; letter-spacing: -0.03em; } .nav .brand .mark em { color: var(--accent); font-style: normal; } .nav .brand .sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; } @media (max-width: 1100px) { .nav .brand .sub { display: none; } } .nav-links { display: flex; gap: 22px; align-items: center; } @media (max-width: 1100px) { /* On mobile / tablet: brand-left, LINE CTA centered, right slot reserved for menu */ .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; } .nav .brand { justify-self: start; } .nav-cta { justify-self: center; } } @media (max-width: 1280px) { .nav-links { gap: 16px; } .nav-links a { font-size: 12px; } } @media (max-width: 1100px) { .nav-links { display: none; } } .nav-links a { font-size: 13px; position: relative; padding: 6px 0; display: inline-flex; align-items: center; gap: 4px; } .nav-links a .caret { font-size: 9px; opacity: 0.55; margin-left: 2px; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; width: 0; height: 1px; background: currentColor; transition: width 0.25s ease; } .nav-links a:hover::after { width: 100%; } .nav-divider { width: 1px; height: 16px; background: var(--line-soft); margin: 0 4px; } .nav-links .lang { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; opacity: 0.6; } .nav-links .lang.is-active { opacity: 1; color: var(--accent); } .nav-links .lang::after { display: none; } .nav-sep { opacity: 0.3; font-size: 11px; } .nav-search { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--ink); transition: background-color 0.2s ease, color 0.2s ease; } .nav-search:hover { background: var(--ink); color: var(--bg); } .nav-cta { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--ink); color: var(--bg); font-size: 13px; letter-spacing: 0.08em; transition: background-color 0.2s ease, color 0.2s ease; } .nav-cta:hover { background: var(--accent); color: var(--bg); } .nav-cta svg { width: 12px; height: 12px; } /* ============================== HERO ============================== */ .hero { padding: 130px var(--pad-x) 60px; position: relative; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-content: end; } .hero-meta { position: absolute; top: 110px; left: var(--pad-x); right: var(--pad-x); display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); } .hero-meta .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; animation: pulse 1.6s ease infinite; vertical-align: middle; } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } .hero-left { padding-top: 60px; } .hero-eyebrow { display: flex; gap: 10px; align-items: center; margin-bottom: 32px; } .hero-eyebrow .line { width: 38px; height: 1px; background: var(--ink); } .hero-eyebrow .text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; } .hero-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, 8.2vw, 132px); line-height: 0.92; letter-spacing: -0.03em; } .hero-title em { font-style: italic; color: var(--accent); } .hero-title .strike { display: inline-block; position: relative; } .hero-title .strike::after { content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: 6px; background: var(--accent); opacity: 0.85; transform: rotate(-2deg); } .hero-title .underset { display: inline-block; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 12px; text-decoration-color: var(--accent); } .hero-tag { margin-top: 36px; max-width: 36ch; font-family: var(--font-serif); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.7; color: var(--ink-soft); } .hero-ctas { margin-top: 44px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; font-size: 14px; letter-spacing: 0.06em; border: 1px solid var(--ink); transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--ink); color: var(--bg); } .btn-primary:hover { background: var(--accent); border-color: var(--accent); } .btn-ghost { background: transparent; color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--bg); } .btn .arrow { display: inline-block; transition: transform 0.2s ease; } .btn:hover .arrow { transform: translateX(4px); } /* SERVICE MAP (right hero) */ .service-map { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(118px, auto); gap: 1px; background: var(--line); border: 1px solid var(--line); align-self: end; } .smap-tile { background: var(--bg); padding: 14px 14px 12px; position: relative; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; min-height: 118px; } .smap-tile:hover { background: var(--ink); color: var(--bg); } .smap-tile.is-active { background: var(--accent); color: var(--bg); } .smap-tile .num { font-family: var(--font-mono); font-size: 10px; opacity: 0.7; letter-spacing: 0.15em; } .smap-tile .name { font-family: var(--font-display); font-size: 24px; line-height: 1.05; margin-top: 6px; max-width: 9ch; } .smap-tile .en { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; } .smap-tile .arrow { position: absolute; right: 12px; top: 12px; font-size: 14px; opacity: 0.5; transition: transform 0.25s ease, opacity 0.2s ease; } .smap-tile:hover .arrow { opacity: 1; transform: translate(2px, -2px); } .smap-tile .cat-stripe { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; } .smap-tile[data-cat="design"] .cat-stripe { background: var(--accent); } .smap-tile[data-cat="marketing"] .cat-stripe { background: var(--accent-2); } .smap-tile[data-cat="event"] .cat-stripe { background: var(--ink); } .smap-tile[data-cat="print"] .cat-stripe { background: var(--ink-soft); } .smap-detail { grid-column: 1 / -1; background: var(--paper); padding: 26px 28px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) auto; gap: 28px; align-items: start; } .smap-detail .d-title { font-family: var(--font-display); font-size: 36px; line-height: 1; display: flex; align-items: baseline; gap: 14px; } .smap-detail .d-title .small { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; opacity: 0.6; } .smap-detail .d-desc { font-family: var(--font-serif); font-size: 14px; line-height: 1.7; color: var(--ink-soft); } .smap-detail .d-feat { display: flex; flex-direction: column; gap: 8px; } .smap-detail .d-feat .f { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; } .smap-detail .d-feat .f::before { content: "+ "; opacity: 0.6; } .smap-legend { margin-top: 14px; display: flex; gap: 26px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); } .smap-legend .dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: middle; } .smap-legend .dot.design { background: var(--accent); } .smap-legend .dot.marketing { background: var(--accent-2); } .smap-legend .dot.event { background: var(--ink); } .smap-legend .dot.print { background: var(--ink-soft); } /* ============================== SERVICES TAB SECTION ============================== */ .svc { background: var(--paper); } .svc-tabs { display: flex; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 56px; } .svc-tab { flex: 1; padding: 22px 24px; text-align: left; border-right: 1px solid var(--line-soft); position: relative; transition: background-color 0.25s ease, color 0.25s ease; display: flex; flex-direction: column; gap: 8px; } .svc-tab:last-child { border-right: none; } .svc-tab .tnum { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; opacity: 0.55; } .svc-tab .tname { font-family: var(--font-display); font-size: 28px; line-height: 1; } .svc-tab .ten { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; } .svc-tab:hover { background: var(--bg); } .svc-tab.is-active { background: var(--ink); color: var(--bg); } .svc-tab.is-active .tnum, .svc-tab.is-active .ten { opacity: 0.8; } .svc-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 48px; } .svc-overview { padding-right: 16px; position: sticky; top: 100px; align-self: start; } .svc-overview .big-num { font-family: var(--font-display); font-size: clamp(80px, 9vw, 160px); line-height: 0.9; color: var(--accent); } .svc-overview h3 { font-family: var(--font-display); font-size: 36px; line-height: 1.05; font-weight: 400; margin-top: 14px; } .svc-overview p { font-family: var(--font-serif); font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin-top: 18px; max-width: 32ch; } .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); } .svc-card { background: var(--paper); padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 12px; position: relative; min-height: 200px; transition: background-color 0.25s ease, color 0.25s ease; text-decoration: none; color: inherit; } .svc-card .c-arrow { position: absolute; right: 22px; bottom: 22px; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 13px; opacity: 0; transform: translateX(-6px); transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease; } .svc-card:hover { background: var(--bg); } .svc-card:hover .c-arrow { opacity: 1; transform: translateX(0); background: var(--accent); color: #fff; } .svc-card .c-head { display: flex; align-items: baseline; justify-content: space-between; } .svc-card .c-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; opacity: 0.55; } .svc-card .c-name { font-family: var(--font-display); font-size: 28px; line-height: 1.05; margin-top: 6px; } .svc-card .c-en { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; } .svc-card .c-desc { font-family: var(--font-serif); font-size: 14px; line-height: 1.65; color: var(--ink-soft); margin-top: 6px; } .svc-card .c-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; } .svc-card .c-tags span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; padding: 4px 10px; border: 1px solid var(--line-soft); } /* ============================== DIVISIONS ============================== */ .divisions { background: var(--bg); } .div-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .div-card { display: flex; flex-direction: column; gap: 18px; padding: 36px 32px 32px; min-height: 380px; position: relative; text-decoration: none; color: inherit; transition: background-color 0.3s ease, color 0.3s ease; } .div-card--light { background: var(--paper); color: var(--ink); } .div-card--dark { background: var(--ink); color: var(--bg); } .div-card:hover { background: var(--accent); color: #fff; } .div-card:hover .div-tag, .div-card:hover .div-en, .div-card:hover .div-desc, .div-card:hover .div-headline, .div-card:hover .div-bullets li, .div-card:hover .div-num { color: #fff !important; } .div-card:hover .div-arrow { background: #fff !important; color: var(--accent) !important; transform: translateX(4px); } .div-card__head { display: flex; align-items: baseline; justify-content: space-between; } .div-num { font-family: var(--font-display); font-size: 56px; line-height: 0.9; letter-spacing: -0.02em; } .div-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; } .div-card__name { display: flex; align-items: baseline; gap: 14px; margin-top: 4px; } .div-card__name h3 { font-family: var(--font-display); font-size: clamp(34px, 3.4vw, 48px); line-height: 1; letter-spacing: -0.02em; font-weight: 400; } .div-en { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; opacity: 0.6; text-transform: uppercase; } .div-headline { font-family: var(--font-display); font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; margin-top: 4px; } .div-desc { font-family: var(--font-serif); font-size: 14.5px; line-height: 1.7; opacity: 0.78; max-width: 46ch; } .div-bullets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .div-bullets li { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; padding: 5px 10px; border: 1px solid currentColor; opacity: 0.85; list-style: none; } .div-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 12px; padding-top: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; } .div-arrow { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 14px; transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease; } @media (max-width: 900px) { .div-grid { grid-template-columns: 1fr; } } /* ============================== STATS ============================== */ .stats { background: var(--ink); color: var(--bg); padding: clamp(60px, 7vw, 110px) var(--pad-x); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.12); } .stat { background: var(--ink); padding: 36px 30px; position: relative; } .stat .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; } .stat .num { font-family: var(--font-display); font-size: clamp(64px, 7vw, 120px); line-height: 0.95; margin-top: 18px; letter-spacing: -0.02em; } .stat .num small { font-size: 0.35em; vertical-align: top; opacity: 0.7; margin-left: 6px; } .stat .caption { font-family: var(--font-serif); font-size: 13px; line-height: 1.55; opacity: 0.7; margin-top: 14px; } .stat .corner { position: absolute; top: 12px; right: 14px; font-family: var(--font-mono); font-size: 10px; opacity: 0.4; } /* ============================== WORKS ============================== */ /* Portfolio grid: 3-col base, alternating big (span 2 / landscape) + small (span 1 / portrait). YouTube grid: 3 equal columns. */ .works-grid { display: grid; gap: 28px; } .works-grid--portfolio { grid-template-columns: repeat(3, 1fr); } .works-grid--yt { grid-template-columns: repeat(3, 1fr); margin-top: 18px; } .works-yt-head { margin-top: 90px; padding-top: 60px; border-top: 1px solid var(--line-soft); } .works-yt-title { font-size: clamp(32px, 4vw, 56px); line-height: 1; letter-spacing: -0.02em; margin-bottom: 12px; } .works-yt-sub { font-family: var(--font-serif); font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 52ch; } .work { position: relative; cursor: pointer; display: flex; flex-direction: column; text-decoration: none; color: inherit; } .work .frame { background: var(--paper); position: relative; overflow: hidden; border: 1px solid var(--line-soft); flex-shrink: 0; width: 100%; } .work .frame::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, var(--line-soft) 0 1px, transparent 1px 16px); opacity: 0.7; } .work .placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; text-align: center; } .work .placeholder .ph-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; } .work .placeholder .ph-icon { width: 56px; height: 56px; border: 1px solid var(--ink-soft); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; background: var(--bg); } .work .meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; gap: 18px; } .work .meta .meta-l { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; } .work .meta .title { font-family: var(--font-display); font-size: clamp(20px, 1.6vw, 26px); line-height: 1.15; color: var(--ink); } .work .meta .subtitle { font-family: var(--font-serif); font-size: 13px; line-height: 1.45; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .work .meta .cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; opacity: 0.55; text-transform: uppercase; flex-shrink: 0; } .work .meta .row { display: flex; gap: 10px; align-items: baseline; } .work .frame .overlay { position: absolute; inset: 0; background: var(--ink); color: var(--bg); opacity: 0; display: flex; align-items: flex-end; padding: 22px; transition: opacity 0.3s ease; } .work:hover .frame .overlay { opacity: 0.98; } .work .frame .overlay .o-inner { font-family: var(--font-serif); font-size: 14px; line-height: 1.55; } .work .frame .overlay .o-inner .o-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; opacity: 0.65; display: block; margin-bottom: 8px; } /* YouTube thumb in works grid */ .work .frame .yt-thumb { position: absolute; inset: 0; overflow: hidden; background: #000; } .work .frame .yt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease, filter 0.3s ease; } .work:hover .frame .yt-thumb img { transform: scale(1.04); filter: brightness(0.92); } .work .frame .yt-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; transition: transform 0.25s ease; pointer-events: none; } .work:hover .frame .yt-play { transform: translate(-50%, -50%) scale(1.08); } .work .frame .yt-badge { position: absolute; top: 14px; left: 14px; font-size: 10px; letter-spacing: 0.2em; padding: 5px 10px; background: var(--accent); color: #fff; } .work .frame .yt-label { position: absolute; bottom: 14px; left: 14px; right: 14px; font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 28px); line-height: 1.1; letter-spacing: -0.01em; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.55), 0 1px 0 rgba(0,0,0,0.3); z-index: 2; pointer-events: none; } /* LINE add-friend button under contact channels */ .line-btn { display: inline-block; margin-top: 24px; } .line-btn img { display: block; height: 40px; width: auto; } /* Works grid — when card.image is set, show real image and hide stripe overlay */ .work .frame:has(.real-img)::before, .work .frame:has(.yt-thumb)::before { display: none; } .work .frame .real-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform 0.5s ease, filter 0.3s ease; } .work:hover .frame .real-img { transform: scale(1.04); filter: brightness(0.92); } /* Blog cover — same treatment */ .b-card .b-cover:has(.real-img)::before { display: none; } .b-card .b-cover:has(.real-img) .b-icon { display: none; } .b-card .b-cover .real-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } /* Trust wall — support real logo images, falls back to text if missing */ .trust-logo .logo-img { max-height: 56%; max-width: 70%; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: 0.78; transition: filter 0.2s ease, opacity 0.2s ease; } .trust-logo:hover .logo-img { filter: none; opacity: 1; } /* Works grid — 3-col uniform, 4:3 landscape cards */ .card-uniform { grid-column: span 1; } .card-uniform .frame { aspect-ratio: 4/3; } /* Work card meta — stacked under the image (title clearly visible) */ .work .work-title { font-family: var(--font-display); font-size: clamp(20px, 1.6vw, 26px); line-height: 1.2; letter-spacing: -0.01em; font-weight: 400; color: var(--ink); margin: 18px 0 6px; } .work .work-sub { font-family: var(--font-serif); font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .work .work-cat-row { display: flex; align-items: baseline; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--line-soft); } .work .work-cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); } .work .work-go { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; color: var(--ink); opacity: 0; transform: translateX(-4px); transition: opacity 0.2s ease, transform 0.2s ease; } .work:hover .work-go { opacity: 1; transform: translateX(0); color: var(--accent); } /* hide legacy .meta block (replaced by work-title / work-sub above) */ .work .meta { display: none; } /* Works grid — 3-col base, big = span 2 landscape, small = span 1 portrait */ .card-big { grid-column: span 2; } .card-big .frame { aspect-ratio: 4/3; } .card-sm { grid-column: span 1; } .card-sm .frame { aspect-ratio: 3/4; } .yt-card { grid-column: span 1; } .yt-card .frame { aspect-ratio: 16/9; } /* legacy classes kept for backward compat */ .w-h-4-6 { grid-column: span 6; aspect-ratio: 4/3; } .w-h-12 { grid-column: span 12; aspect-ratio: 21/9; } .w-h-4 { grid-column: span 4; aspect-ratio: 3/4; } .w-h-8 { grid-column: span 8; aspect-ratio: 16/9; } /* ============================== PROCESS ============================== */ .process { background: var(--bg); } .process-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); } .p-step { background: var(--bg); padding: 30px 22px 36px; position: relative; transition: background-color 0.25s ease; display: flex; flex-direction: column; gap: 14px; } .p-step:hover { background: var(--paper); } .p-step .pnum { font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--accent); } .p-step .pname { font-family: var(--font-display); font-size: 24px; line-height: 1.05; } .p-step .pen { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; } .p-step .pdesc { font-family: var(--font-serif); font-size: 13px; line-height: 1.6; color: var(--ink-soft); } .p-step::after { content: "→"; position: absolute; right: -10px; top: 50px; font-family: var(--font-mono); color: var(--ink-soft); opacity: 0.4; } .p-step:last-child::after { display: none; } /* ============================== TESTIMONIALS ============================== */ .tst { background: var(--paper); } .tst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .tst-card { background: var(--bg); padding: 32px 28px; border: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 20px; position: relative; } .tst-card .q { font-family: var(--font-display); font-size: 56px; line-height: 0.8; color: var(--accent); position: absolute; top: 16px; right: 22px; opacity: 0.5; } .tst-card .body { font-family: var(--font-serif); font-size: 16px; line-height: 1.65; } .tst-card .who { display: flex; align-items: center; gap: 14px; margin-top: auto; } .tst-card .who .av { width: 44px; height: 44px; background: var(--paper); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 18px; } .tst-card .who .info .name { font-size: 14px; font-weight: 500; } .tst-card .who .info .role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.6; margin-top: 3px; } /* ============================== IG REELS ============================== */ .ig-reels { background: var(--paper); padding: clamp(60px, 7vw, 110px) var(--pad-x) clamp(60px, 7vw, 100px); position: relative; overflow: hidden; } .ig-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 48px; } .ig-rule { width: 56px; height: 2px; background: var(--accent); } .ig-title { font-family: var(--font-display); font-size: clamp(36px, 4.6vw, 64px); line-height: 1; letter-spacing: -0.02em; } .ig-title em { color: var(--accent); font-style: italic; } .ig-sub { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } .ig-sub-tag { border: 1px solid var(--line-soft); padding: 4px 10px; letter-spacing: 0.22em; } .ig-sub em { font-style: normal; color: var(--ink); text-transform: none; letter-spacing: 0.05em; } .ig-dot { opacity: 0.5; } .ig-stage { position: relative; } .ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .ig-grid--six { grid-template-columns: repeat(3, 1fr); gap: 20px; } .ig-card { background: var(--bg); border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; } .ig-card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,0.08); } .ig-reel--embed { position: relative; aspect-ratio: 9 / 16; background: #fff; } .ig-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #fff; } .ig-card-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; } .ig-avatar { width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(from 220deg, #5DBFB5, #E89923, #C13584, #5DBFB5); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 14px; color: #fff; position: relative; flex-shrink: 0; } .ig-avatar::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--bg); z-index: 0; } .ig-avatar span { position: relative; z-index: 1; color: var(--ink); } .ig-meta { flex: 1; min-width: 0; } .ig-handle { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ig-music { font-family: var(--font-mono); font-size: 10px; color: var(--ink-soft); margin-top: 2px; letter-spacing: 0.05em; } .ig-profile-btn { background: #0095F6; color: #fff; font-size: 11px; font-weight: 600; padding: 6px 10px; border-radius: 6px; white-space: nowrap; flex-shrink: 0; } .ig-profile-btn:hover { background: #007ACC; } .ig-reel { position: relative; aspect-ratio: 9 / 14; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #1F1F1F; } .ig-reel--thumb { border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; display: block; width: 100%; } .ig-reel--embed { background: #fff; } .ig-iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; } .ig-reel-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.5s ease, filter 0.3s ease; } .ig-reel--thumb:hover .ig-reel-thumb-img { transform: scale(1.04); filter: brightness(0.92); } .ig-reel-no { position: absolute; top: 10px; left: 12px; font-family: var(--font-display); font-size: 22px; color: #fff; line-height: 1; text-shadow: 0 2px 8px rgba(0,0,0,0.4); z-index: 2; } .ig-reel-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; transition: transform 0.25s ease; } .ig-reel:hover .ig-reel-play { transform: translate(-50%, -50%) scale(1.08); } .ig-reel-caption { position: absolute; left: 12px; right: 12px; bottom: 12px; background: rgba(0,0,0,0.55); color: #fff; font-family: var(--font-serif); font-size: 12px; line-height: 1.4; padding: 8px 10px; border-radius: 6px; backdrop-filter: blur(6px); z-index: 2; } .ig-card-foot { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; } .ig-view-more { color: #00376B; font-size: 12px; font-weight: 500; } .ig-view-more:hover { text-decoration: underline; } .ig-actions { display: flex; gap: 12px; align-items: center; font-size: 17px; color: var(--ink); opacity: 0.85; } .ig-actions .ig-ic-end { margin-left: auto; } /* ARROWS */ .ig-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 50%; font-size: 22px; line-height: 1; color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(0,0,0,0.08); z-index: 3; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .ig-arrow:hover { background: var(--ink); color: var(--bg); } .ig-arrow-left { left: -16px; } .ig-arrow-right { right: -16px; } /* FOLLOW CTA — speech-bubble style */ .ig-follow { position: absolute; right: -8px; bottom: -28px; background: var(--ink); color: var(--bg); padding: 12px 18px 12px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; transform: rotate(-4deg); transition: transform 0.25s ease, background-color 0.25s ease; z-index: 4; } .ig-follow:hover { transform: rotate(0deg) scale(1.04); background: var(--accent); } .ig-follow-arrow { width: 28px; height: 28px; background: var(--accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; } .ig-follow:hover .ig-follow-arrow { background: var(--ink); } .ig-follow-text { display: flex; flex-direction: column; line-height: 1.2; } .ig-follow-line1 { font-size: 10px; opacity: 0.75; letter-spacing: 0.18em; text-transform: uppercase; } .ig-follow-line2 { font-size: 13px; font-weight: 600; } /* DOTS */ .ig-dots { display: flex; justify-content: center; gap: 10px; margin-top: 48px; } .ig-dot-btn { width: 28px; height: 4px; background: var(--line-soft); border: none; padding: 0; cursor: pointer; transition: background-color 0.2s ease, width 0.2s ease; } .ig-dot-btn.is-on { background: var(--accent); width: 56px; } @media (max-width: 1100px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } .ig-grid--six { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .ig-grid { grid-template-columns: 1fr; } .ig-grid--six { grid-template-columns: 1fr; } .ig-follow { position: static; transform: none; margin: 32px auto 0; } } /* ============================== TRUST WALL ============================== */ .trust { background: var(--bg); padding-top: 60px; padding-bottom: 60px; } .trust-row { display: flex; align-items: center; gap: 24px; margin-bottom: 28px; } .trust-row .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; } .trust-row .hairline { flex: 1; height: 1px; background: var(--line-soft); } .trust-logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); } .trust-logo { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); height: 110px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; color: var(--ink-soft); letter-spacing: -0.01em; transition: color 0.2s ease, background-color 0.2s ease; } .trust-logo:hover { color: var(--ink); background: var(--paper); } .cert-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; } .cert { border: 1px solid var(--line); padding: 24px 26px; display: flex; gap: 20px; align-items: center; } .cert .ic { width: 52px; height: 52px; border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; background: var(--paper); flex-shrink: 0; } .cert .info .t { font-family: var(--font-display); font-size: 20px; line-height: 1.1; } .cert .info .s { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; margin-top: 4px; } /* ============================== BLOG ============================== */ .blog { background: var(--paper); } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .b-card { background: var(--bg); padding: 24px 24px 28px; border: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 16px; transition: background-color 0.2s ease; } .b-card:hover { background: var(--paper); } .b-card .b-cover { aspect-ratio: 16/10; background: var(--paper); border: 1px solid var(--line-soft); position: relative; overflow: hidden; } .b-card .b-cover::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, var(--line-soft) 0 1px, transparent 1px 14px); } .b-card .b-cover .b-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-size: 40px; color: var(--ink-soft); } .b-card .b-meta { display: flex; gap: 14px; align-items: baseline; } .b-card .b-meta .cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .b-card .b-meta .date { font-family: var(--font-mono); font-size: 10px; opacity: 0.55; } .b-card .b-title { font-family: var(--font-display); font-size: 22px; line-height: 1.2; } .b-card .b-excerpt { font-family: var(--font-serif); font-size: 14px; line-height: 1.6; color: var(--ink-soft); } .b-card .b-read { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; } .b-card .b-read::after { content: " →"; } /* ============================== CONTACT ============================== */ .contact { background: var(--ink); color: var(--bg); padding: clamp(80px, 9vw, 140px) var(--pad-x); } .contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 60px; } .contact h2 { font-family: var(--font-display); font-size: clamp(48px, 6.5vw, 110px); line-height: 0.95; font-weight: 400; letter-spacing: -0.02em; } .contact h2 em { font-style: italic; color: var(--accent); } .contact .lede { font-family: var(--font-serif); font-size: 17px; line-height: 1.6; opacity: 0.7; margin-top: 24px; max-width: 38ch; } .contact-channels { margin-top: 40px; display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(255,255,255,0.18); } .c-chan { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.18); transition: padding 0.2s ease; } .c-chan:hover { padding-left: 14px; } .c-chan .cl { display: flex; align-items: baseline; gap: 16px; } .c-chan .cl .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; opacity: 0.5; } .c-chan .cl .val { font-family: var(--font-display); font-size: 26px; } .c-chan .arr { font-family: var(--font-mono); opacity: 0.5; } .form { background: var(--paper); color: var(--ink); padding: 36px 32px; } .form h3 { font-family: var(--font-display); font-size: 28px; line-height: 1.1; margin-bottom: 20px; } .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .f-field { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--line); } .f-field label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; } .f-field input, .f-field textarea, .f-field select { background: transparent; border: none; outline: none; font: inherit; color: inherit; padding: 4px 0; font-family: var(--font-serif); font-size: 16px; resize: none; } .f-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; } .f-chip { padding: 6px 12px; border: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; cursor: pointer; user-select: none; transition: background-color 0.15s ease, color 0.15s ease; } .f-chip.is-on { background: var(--ink); color: var(--paper); } .f-submit { margin-top: 22px; width: 100%; background: var(--ink); color: var(--paper); padding: 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid var(--ink); display: flex; justify-content: space-between; align-items: center; transition: background-color 0.2s ease, color 0.2s ease; } .f-submit:hover { background: var(--accent); border-color: var(--accent); } /* ============================== FOOTER ============================== */ .footer { background: var(--bg); padding: 80px var(--pad-x) 36px; border-top: 1px solid var(--line); } .footer-main { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 32px; } .footer-main .brand-big { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; } .footer-main .brand-big img.logo { width: clamp(220px, 28vw, 380px); height: auto; display: block; } [data-theme="brutalist"] .footer-main .brand-big img.logo { filter: invert(1) hue-rotate(180deg); } .footer-main .brand-big .footer-brand-line { font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); line-height: 1; letter-spacing: -0.01em; margin-top: 4px; color: var(--ink); } .footer-main .brand-big .footer-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); max-width: 30ch; line-height: 1.55; } .footer-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 16px; } .footer-col ul { display: flex; flex-direction: column; gap: 10px; } .footer-col li { font-size: 13px; } .footer-col li a:hover { color: var(--accent); } .footer-bottom { margin-top: 60px; display: flex; justify-content: space-between; align-items: baseline; padding-top: 24px; border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; color: var(--ink-soft); text-transform: uppercase; } /* ============================== ANIMATIONS ============================== */ .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .fade-up.is-in { opacity: 1; transform: translateY(0); } /* ============================== RESPONSIVE ============================== */ @media (max-width: 980px) { .hero { grid-template-columns: 1fr; padding-top: 200px; } .hero-left { padding-top: 0; } .hero-meta { position: static; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 40px; } .service-map { grid-template-columns: repeat(2, 1fr); } .smap-detail { grid-template-columns: 1fr; } .section-head { grid-template-columns: 1fr; } .svc-content { grid-template-columns: 1fr; } .svc-overview { position: static; } .svc-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .works-grid--portfolio { grid-template-columns: repeat(2, 1fr); } .works-grid--yt { grid-template-columns: 1fr; } .card-uniform, .card-big, .card-sm, .yt-card { grid-column: span 1; } .card-uniform .frame { aspect-ratio: 4/3; } .card-big .frame { aspect-ratio: 4/3; } .card-sm .frame { aspect-ratio: 3/4; } .works-grid { grid-template-columns: repeat(6, 1fr); } .w-h-4-6, .w-h-12, .w-h-4, .w-h-8 { grid-column: span 6; aspect-ratio: 4/3; } .process-steps { grid-template-columns: 1fr 1fr; } .p-step::after { display: none; } .tst-grid, .blog-grid { grid-template-columns: 1fr; } .trust-logos { grid-template-columns: repeat(3, 1fr); } .cert-row { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } .footer-main { grid-template-columns: 1fr 1fr; } .svc-tabs { flex-wrap: wrap; } .svc-tab { flex-basis: 50%; border-right: none; border-bottom: 1px solid var(--line-soft); } } /* ---- CCD PHP-port small fixes (not in V2 reference) ----------------- */ .ig-card[hidden] { display: none !important; } .work[hidden] { display: none !important; } .b-card .b-cover.has-thumb::before { display: none; } .b-card .b-cover.has-thumb .b-icon { display: none; } .b-card .b-cover img.real-img, .b-card .b-cover img.b-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================== NAV DROPDOWN (V2.3) ============================== */ .nav-item { position: relative; display: inline-flex; align-items: center; } .nav-item::after { /* invisible bridge between trigger and dropdown so cursor doesn't drop out */ content: ""; position: absolute; left: -10px; right: -10px; top: 100%; height: 12px; } .nav-dropdown { position: absolute; top: calc(100% + 10px); left: -16px; min-width: 220px; background: var(--bg); border: 1px solid var(--line-soft); box-shadow: 0 16px 40px rgba(0,0,0,0.10); padding: 6px 0; margin: 0; list-style: none; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 60; } .nav-item:hover > .nav-dropdown, .nav-item:focus-within > .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown li { display: block; margin: 0; padding: 0; } .nav-dropdown li a { display: block; padding: 10px 20px; font-size: 13px; line-height: 1.4; white-space: nowrap; color: var(--ink); position: static; } .nav-dropdown li a::after { display: none; } .nav-dropdown li a:hover { background: var(--paper); color: var(--accent); } @media (max-width: 1100px) { .nav-dropdown { display: none !important; } .nav-item::after { display: none; } } /* ============================== STRIPES FALLBACK (replace :has() for older Safari) ============================== */ .work .frame.has-yt::before, .work .frame.has-img::before { display: none !important; } /* ============================== MOBILE PORTFOLIO: clean image-only grid ============================== */ @media (max-width: 720px) { .works-grid--portfolio .work-title, .works-grid--portfolio .work-sub, .works-grid--portfolio .work-cat-row { display: none !important; } .works-grid--portfolio { gap: 10px; } .works-grid--portfolio .card-uniform .frame { aspect-ratio: 1 / 1; } } /* ============================== MOBILE IG: horizontal swipe carousel ============================== */ @media (max-width: 780px) { .ig-stage { padding-left: 0; padding-right: 0; } .ig-grid { display: flex !important; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 12px; padding: 4px 16px 18px; scroll-padding-left: 16px; scrollbar-width: none; } .ig-grid::-webkit-scrollbar { display: none; } .ig-card[hidden] { display: flex !important; } .ig-card { flex: 0 0 86vw; scroll-snap-align: center; } .ig-arrow { background: rgba(250,250,247,0.92); border: 1px solid var(--line-soft); box-shadow: 0 4px 14px rgba(0,0,0,0.08); z-index: 5; } .ig-dots { display: none; } } /* ============================== WORK TITLE: desktop full / mobile 6-char ============================== */ .work-title-short { display: none; } @media (max-width: 720px) { .works-grid--portfolio .work-title { display: block !important; } .works-grid--portfolio .work-title-full { display: none; } .works-grid--portfolio .work-title-short { display: block; font-family: var(--font-display); font-size: 14px; line-height: 1.3; margin-top: 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* ============================== V2.3.2 — Fix 720px overflow bug ============================== * V2 theme.css 在 @media (max-width:720px) 內留了 `.works-grid { grid-template-columns: repeat(6, 1fr); }` * 給舊版 magazine layout 用,但它的選擇器跟 `.works-grid--portfolio` 同優先級,寫得又比較後面, * 結果把 2 欄 / 1 欄設定全部蓋掉,造成手機版水平溢出 → 觸發 pinch zoom 異常 → YT 縮圖也跟著掛掉。 * 用更高優先級(雙選擇器)強制蓋回來。 */ @media (max-width: 720px) { .works-grid.works-grid--portfolio { grid-template-columns: repeat(2, 1fr) !important; } .works-grid.works-grid--yt { grid-template-columns: 1fr !important; } .works-grid.works-grid--portfolio .card-uniform { grid-column: span 1 !important; } .works-grid.works-grid--yt .yt-card { grid-column: span 1 !important; } } /* ============================== V2.3.2 — Force no horizontal scroll on mobile ============================== */ html, body { max-width: 100vw; overflow-x: hidden !important; } @media (max-width: 720px) { .container { padding-left: 16px; padding-right: 16px; } .ig-card { flex: 0 0 calc(100vw - 64px) !important; } } /* ============================== V2.3.2 — YT fallback height (in case aspect-ratio unsupported) ============================== */ @supports not (aspect-ratio: 1 / 1) { .yt-card .frame { position: relative; height: 0; padding-bottom: 56.25%; } .card-uniform .frame { position: relative; height: 0; padding-bottom: 75%; } .yt-card .frame > *, .card-uniform .frame > * { position: absolute; inset: 0; } } /* ============================== NAV 3rd-level flyout (V2.3.6) ============================== */ .nav-dropdown li.has-children { position: relative; } .nav-dropdown li.has-children > a { display: flex; align-items: center; justify-content: space-between; } .nav-dropdown li.has-children > a .caret-r { font-size: 12px; opacity: 0.5; margin-left: 12px; } .nav-dropdown-sub { position: absolute; top: -1px; left: 100%; min-width: 210px; list-style: none; margin: 0; padding: 6px 0; background: var(--bg); border: 1px solid var(--line-soft); box-shadow: 0 16px 40px rgba(0,0,0,0.12); opacity: 0; visibility: hidden; transform: translateX(6px); transition: opacity .18s ease, visibility .18s ease, transform .18s ease; z-index: 60; } .nav-dropdown li.has-children:hover > .nav-dropdown-sub, .nav-dropdown li.has-children:focus-within > .nav-dropdown-sub { opacity: 1; visibility: visible; transform: translateX(0); } .nav-dropdown-sub li { display: block; margin: 0; padding: 0; } .nav-dropdown-sub li a { display: block; padding: 10px 20px; font-size: 13px; line-height: 1.4; white-space: nowrap; color: var(--ink); position: static; } .nav-dropdown-sub li a::after { display: none; } .nav-dropdown-sub li a:hover { background: var(--paper); color: var(--accent); }