/*
rg_style.css
Design system สำหรับ author registration (prefix: .rg)
เรียกใช้:
ต้องมี Google Fonts ใน ของ top.php:
*/
/* ================================================================
RESET
================================================================ */
.rg *, .rg *::before, .rg *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ================================================================
TOKENS & PAGE WRAPPER
================================================================ */
.rg {
--ink: #0f1623;
--ink2: #3d4a63;
--dim: #8492aa;
--line: #e4e9f4;
--surf: #f8f9fd;
--white: #ffffff;
--blue: #3b5bfa;
--blue2: #2946d6;
--blue-t: rgba(59,91,250,.10);
--red: #e03131;
--green: #2f9e44;
--sh: 0 1px 3px rgba(15,22,35,.06), 0 8px 24px rgba(15,22,35,.07);
--sh2: 0 2px 8px rgba(15,22,35,.05);
--r: 16px;
--r2: 10px;
font-family: 'DM Sans', sans-serif;
color: var(--ink);
padding: 2.5rem 1.75rem 4rem;
background:
radial-gradient(ellipse 70% 40% at 80% 0%, rgba(59,91,250,.06) 0%, transparent 60%),
radial-gradient(ellipse 50% 30% at 10% 100%, rgba(59,91,250,.04) 0%, transparent 50%),
var(--surf);
min-height: 100%;
}
/* ================================================================
PAGE HEADER
================================================================ */
.rg .pg-head { margin-bottom: 2.5rem; }
.rg .pg-tag {
display: inline-flex; align-items: center; gap: .45rem;
font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
color: var(--blue); margin-bottom: .6rem;
}
.rg .pg-tag::before {
content: ''; width: 18px; height: 1.5px;
background: currentColor; border-radius: 2px;
}
.rg .pg-head h1 {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 2.1rem; font-weight: 400; letter-spacing: -.01em; line-height: 1.15;
color: var(--ink);
}
.rg .pg-head h1 em { font-style: italic; color: var(--blue); }
.rg .pg-note { margin-top: .5rem; font-size: .82rem; color: var(--dim); }
.rg .req { color: var(--red); font-weight: 700; }
.rg .opt-lbl { color: var(--dim); font-size: .75rem; font-weight: 400; margin-left: 4px; }
/* ================================================================
STEP INDICATOR
================================================================ */
.rg .steps {
display: flex; align-items: center; gap: 0;
margin-bottom: 2rem;
background: var(--white); border: 1px solid var(--line);
border-radius: var(--r); padding: .75rem 1.25rem;
box-shadow: var(--sh2);
}
.rg .step {
display: flex; align-items: center; gap: .5rem;
font-size: .78rem; font-weight: 500; color: var(--dim); flex: 1;
}
.rg .step.active { color: var(--blue); font-weight: 600; }
.rg .step.done { color: var(--green); }
.rg .step-num {
width: 22px; height: 22px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: .7rem; font-weight: 700; flex-shrink: 0;
background: var(--line); color: var(--dim);
}
.rg .step.active .step-num { background: var(--blue); color: #fff; }
.rg .step.done .step-num { background: var(--green); color: #fff; }
.rg .step-sep {
width: 100%; max-width: 32px; height: 1px;
background: var(--line); margin: 0 .5rem; flex: none;
}
/* ================================================================
CARD
================================================================ */
.rg .card {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--sh);
overflow: hidden;
margin-bottom: 1.5rem;
position: relative;
}
/* top accent stripe */
.rg .card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--blue) 0%, rgba(59,91,250,.3) 100%);
}
/* card header */
.rg .ch {
padding: 1rem 1.5rem .9rem;
display: flex; align-items: center; gap: .6rem;
border-bottom: 1px solid var(--line);
}
.rg .ch-icon {
width: 30px; height: 30px; border-radius: 8px;
background: var(--blue-t); color: var(--blue);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rg .ch-title {
font-size: .8rem; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: var(--ink); line-height: 1;
}
.rg .ch-sub { font-size: .72rem; color: var(--dim); margin-top: 2px; }
/* card body */
.rg .cb { padding: 1.5rem; }
/* ================================================================
GRID
================================================================ */
.rg .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.1rem; }
.rg .full { grid-column: 1 / -1; }
.rg .g2 { grid-template-columns: repeat(2, 1fr); }
/* ================================================================
FIELD
================================================================ */
.rg .fd { display: flex; flex-direction: column; gap: .3rem; }
.rg .fd > label {
font-size: .77rem; font-weight: 600; color: var(--ink2);
display: flex; align-items: center; gap: .2rem;
}
.rg .hint { font-size: .72rem; color: var(--dim); margin-top: 1px; }
/* ================================================================
INPUTS
================================================================ */
.rg input[type=text],
.rg input[type=password],
.rg select,
.rg textarea {
width: 100%; padding: .6rem .9rem;
border: 1.5px solid var(--line); border-radius: var(--r2);
font-family: inherit; font-size: .875rem; color: var(--ink);
background: var(--white); outline: none; appearance: none;
transition: border-color .18s, box-shadow .18s, background .18s;
}
.rg input:hover, .rg select:hover, .rg textarea:hover { border-color: #c8d0e8; }
.rg input:focus, .rg select:focus, .rg textarea:focus {
border-color: var(--blue);
box-shadow: 0 0 0 3.5px rgba(59,91,250,.13);
background: #fff;
}
.rg select {
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238492aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right .85rem center;
padding-right: 2.2rem; cursor: pointer;
}
.rg textarea { resize: vertical; min-height: 80px; line-height: 1.55; }
/* ================================================================
SUB-SECTION DIVIDER (Address, Contact ฯลฯ)
================================================================ */
.rg .sub-head {
grid-column: 1 / -1;
display: flex; align-items: center; gap: .65rem;
padding: .6rem 0 .35rem;
border-top: 1px solid var(--line); margin-top: .2rem;
}
.rg .sub-head span {
font-size: .7rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
/* ================================================================
CHECKBOX ROW
================================================================ */
.rg .ck {
display: flex; align-items: center; gap: .7rem;
padding: .75rem 1rem;
border: 1.5px solid var(--line); border-radius: var(--r2);
cursor: pointer; transition: border-color .15s, background .15s;
background: var(--surf);
}
.rg .ck:hover { border-color: var(--blue); background: var(--blue-t); }
.rg .ck input[type=checkbox] {
width: 16px; height: 16px; accent-color: var(--blue); flex-shrink: 0; cursor: pointer;
}
.rg .ck-text { font-size: .875rem; color: var(--ink2); font-weight: 500; }
/* ================================================================
SUBMIT ZONE
================================================================ */
.rg .acts {
display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem;
padding: 1.5rem;
background: var(--white); border: 1px solid var(--line);
border-radius: var(--r); box-shadow: var(--sh2);
}
.rg .acts-note { font-size: .8rem; color: var(--dim); line-height: 1.55; }
.rg .brow { display: flex; gap: .7rem; flex-wrap: wrap; }
/* ================================================================
BUTTONS
================================================================ */
.rg .btn {
display: inline-flex; align-items: center; gap: .5rem;
padding: .65rem 1.5rem; border-radius: var(--r2);
font-family: inherit; font-size: .875rem; font-weight: 600;
cursor: pointer; border: none; letter-spacing: .01em;
transition: background .15s, box-shadow .15s, transform .12s;
}
.rg .btn:active { transform: scale(.98); }
.rg .btn-p { background: var(--blue); color: #fff; box-shadow: 0 2px 8px rgba(59,91,250,.30); }
.rg .btn-p:hover { background: var(--blue2); box-shadow: 0 4px 14px rgba(59,91,250,.38); }
.rg .btn-g { background: var(--surf); color: var(--ink2); border: 1.5px solid var(--line); }
.rg .btn-g:hover { border-color: #c8d0e8; background: var(--white); }
/* ================================================================
ANIMATIONS
================================================================ */
@keyframes rg-fade {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
.rg .card { animation: rg-fade .35s ease both; }
.rg .card:nth-child(2) { animation-delay: .07s; }
.rg .card:nth-child(3) { animation-delay: .14s; }
.rg .steps, .rg .acts { animation: rg-fade .3s ease both; }