style.css

:root { --ink:#303832; --muted:#74756d; --paper:#f6f1e6; --card:#fcfaf4; --line:#dcd5c5; --sage:#657667; --moss:#425447; --clay:#a46e57; --accent:#d9ad77; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans TC",sans-serif; line-height:1.8; overflow-x:hidden; }
.paper-grain { position:fixed; inset:0; z-index:-1; opacity:.42; pointer-events:none; background-image:radial-gradient(#756f6122 .6px, transparent .7px); background-size:7px 7px; }
.site-header, main, footer { width:min(1120px, calc(100% - 48px)); margin:auto; }
.site-header { height:84px; display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--moss); text-decoration:none; font:500 1.35rem "DM Mono",monospace; letter-spacing:-.1em; }.brand span { color:var(--clay); }
nav { display:flex; gap:26px; } nav a { color:var(--muted); text-decoration:none; font-size:.9rem; transition:color .2s; } nav a:hover { color:var(--clay); }
.hero { min-height:550px; display:grid; grid-template-columns:1.35fr .65fr; align-items:center; gap:70px; padding:50px 0 88px; }
.eyebrow,.card-label,.project-status { margin:0 0 12px; color:var(--muted); font:500 .73rem "DM Mono",monospace; letter-spacing:.12em; }.eyebrow span { color:var(--clay); font-size:.8rem; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:"Noto Serif TC",serif; } h1 { margin-bottom:22px; font-size:clamp(2.8rem, 6vw, 5rem); line-height:1.26; letter-spacing:-.075em; } h1 em { color:var(--moss); font-style:normal; } .greeting { margin:0 0 5px; color:var(--clay); font:500 .8rem "DM Mono",monospace; letter-spacing:.08em; } .intro { max-width:570px; color:#5f675f; font-size:1rem; }
.button { display:inline-flex; align-items:center; gap:18px; margin-top:16px; padding:11px 19px; background:var(--moss); color:#fffdf5; text-decoration:none; font-weight:700; border-radius:2px; transition:transform .2s,box-shadow .2s; }.button:hover { transform:translate(-3px,-3px); box-shadow:4px 4px 0 var(--accent); }.button span,.text-link span { font-size:1.2rem; }
.clock-card { padding:32px 28px 26px; background:#fdfaf1; border:1px solid var(--line); border-radius:3px; box-shadow:10px 10px 0 #e6dfce; }.clock-card time { display:block; font:500 clamp(1.65rem,3vw,2.25rem) "DM Mono",monospace; letter-spacing:-.08em; color:var(--moss); white-space:nowrap; }.date,.timezone { color:var(--muted); font-size:.86rem; }.timezone { margin:-8px 0 0; font:400 .7rem "DM Mono",monospace; }.clock-line { height:1px; background:var(--line); margin:23px 0 15px; }.clock-line span { display:block; width:35%; height:1px; background:var(--clay); }.clock-actions { display:flex; flex-wrap:wrap; gap:8px; }.clock-actions button,.edit-button,.quiet-button { padding:6px 9px; color:var(--moss); background:transparent; border:1px solid var(--line); border-radius:2px; font:500 .72rem "Noto Sans TC",sans-serif; cursor:pointer; transition:background .2s,color .2s; }.clock-actions button:hover,.edit-button:hover,.quiet-button:hover { color:#fffdf5; background:var(--moss); border-color:var(--moss); }.copy-status { min-height:1.55em; margin:8px 0 0; color:var(--clay); font-size:.74rem; }.clock-note { margin:4px 0 0; color:#5f675f; font-size:.85rem; }
.section { padding:92px 0 0; }.section-heading { display:flex; align-items:baseline; gap:18px; margin-bottom:28px; }.section-heading .eyebrow { margin:0; } h2 { margin:0; font-size:clamp(1.7rem,3vw,2.35rem); letter-spacing:-.05em; }
.profile-card { display:grid; grid-template-columns:210px 1fr; gap:48px; padding:42px; background:var(--card); border:1px solid var(--line); border-radius:3px; }.avatar { aspect-ratio:1; width:100%; max-width:180px; border-radius:50%; object-fit:cover; object-position:center; box-shadow:0 0 0 7px #e8dfce; }.profile-title-row { display:flex; gap:15px; align-items:flex-start; justify-content:space-between; }.profile-lead { margin-bottom:11px; font-size:1.25rem; }.edit-button { flex-shrink:0; }.profile-card p:not(.profile-lead) { color:#5f675f; }.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; padding:20px 0 0; margin:25px 0 0; border-top:1px solid var(--line); list-style:none; color:#4c564d; font-size:.86rem; }.facts li { display:flex; flex-direction:column; }.facts span { color:var(--muted); font-size:.74rem; }
.skills-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.skill-card { position:relative; min-height:265px; padding:27px; background:#fdfaf1; border:1px solid var(--line); border-radius:3px; transition:transform .25s,border-color .25s; }.skill-card:hover { transform:translateY(-7px); border-color:var(--sage); }.skill-number { color:var(--clay); font:500 .75rem "DM Mono",monospace; }.skill-card h3 { margin:34px 0 10px; font-size:1.35rem; }.skill-card p { color:#697169; font-size:.89rem; line-height:1.75; }.tags { position:absolute; bottom:25px; display:flex; flex-wrap:wrap; gap:6px; }.tags span { padding:3px 8px; border:1px solid var(--line); border-radius:20px; color:#5d685f; font:400 .68rem "DM Mono",monospace; }
.project-card { display:grid; grid-template-columns:.8fr 1.2fr; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:3px; }.project-visual { position:relative; min-height:330px; display:grid; place-items:center; overflow:hidden; background:#dce0d1; }.project-visual span { z-index:1; color:var(--moss); font:500 5.4rem "DM Mono",monospace; letter-spacing:-.2em; }.project-visual i,.project-visual b { position:absolute; border:1px solid #84927d; border-radius:50%; }.project-visual i { width:260px; height:260px; }.project-visual b { width:390px; height:390px; border-color:#b78a72; }.project-content { padding:42px; }.project-content h3 { margin-bottom:10px; font-size:2rem; letter-spacing:-.05em; }.project-content > p:not(.project-status):not(.project-tech) { color:#616961; }.project-tech { margin:23px 0; color:var(--clay); font:400 .75rem "DM Mono",monospace; letter-spacing:.06em; }.text-link { color:var(--moss); text-underline-offset:5px; font-weight:600; }.text-link:hover { color:var(--clay); }
footer { display:flex; justify-content:space-between; margin-top:92px; padding:28px 0 36px; border-top:1px solid var(--line); color:var(--muted); font-size:.78rem; } footer p { margin:0; } footer a { color:var(--muted); } footer a:hover { color:var(--clay); }
dialog { width:min(600px,calc(100% - 32px)); padding:0; color:var(--ink); background:#fdfaf1; border:1px solid var(--line); border-radius:3px; box-shadow:14px 14px 0 #d6cebc; } dialog::backdrop { background:#33403585; backdrop-filter:blur(3px); } dialog form { padding:31px; }.dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; }.dialog-heading h2 { margin:0; font-size:1.7rem; }.close-button { width:32px; height:32px; padding:0; border:0; background:transparent; color:var(--muted); font-size:1.7rem; cursor:pointer; }.close-button:hover { color:var(--clay); } dialog label { display:block; margin:16px 0 5px; color:var(--moss); font-size:.82rem; font-weight:700; } dialog input,dialog textarea { width:100%; padding:9px 10px; color:var(--ink); background:#fffdf7; border:1px solid var(--line); border-radius:2px; font:400 .9rem "Noto Sans TC",sans-serif; line-height:1.7; } dialog input:focus,dialog textarea:focus { outline:2px solid #b6c2ae; border-color:var(--sage); }.settings-note { margin:12px 0 0; color:var(--muted); font-size:.76rem; }.dialog-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:22px; }.dialog-actions .button { margin:0; border:0; cursor:pointer; }
@keyframes rise-in { from { opacity:0; transform:translateY(17px); } to { opacity:1; transform:translateY(0); } } .hero-copy,.clock-card,.section { animation:rise-in .65s ease both; }.clock-card { animation-delay:.12s; }.section { animation-delay:.18s; } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }
@media (max-width:720px) { .site-header,main,footer { width:min(100% - 32px,1120px); }.site-header { height:70px; } nav { gap:15px; } nav a { font-size:.8rem; }.hero { grid-template-columns:1fr; gap:38px; min-height:auto; padding:60px 0; }.clock-card { width:min(100%,390px); }.section { padding-top:68px; }.profile-card,.project-card { grid-template-columns:1fr; }.profile-card { gap:25px; padding:28px; }.avatar { max-width:120px; }.facts { grid-template-columns:1fr; }.skills-grid { grid-template-columns:1fr; }.skill-card { min-height:230px; }.project-visual { min-height:210px; }.project-content { padding:30px 27px; } footer { margin-top:68px; flex-direction:column; gap:8px; }.profile-title-row { display:block; }.edit-button { margin:-2px 0 15px; } }